Fixed avatar image not displaying

Client/src/Components/Avatar/index.jsx

@@ -23,33 +23,18 @@ const Avatar = ({ src, small, sx }) => {
   const border = small ? 1 : 3;
 
   const [image, setImage] = useState();
-  // useEffect(() => {
-  //   const fetchData = async () => {
-  //     try {
-  //       if (user.profileImage.data && user.profileImage.contentType) {
-  //         const url = await bufferToUrl(user.profileImage);
-  //         setImage(url);
-  //       }
-  //     } catch (error) {
-  //       console.error("Error converting buffer to URL: ", error);
-  //     }
-  //   };
-
-  //   fetchData();
-  // }, [user]);
+  useEffect(() => {
+    if (user.avatarImage) {
+      setImage(`data:image/png;base64,${user.avatarImage}`);
+    }
+  }, [user?.avatarImage]);
 
   return (
     <MuiAvatar
       alt={`${user?.firstname} ${user?.lastname}`}
       children={`${user.firstname?.charAt(0)}${user.lastname?.charAt(0)}`}
       src={
-        src === "placeholder"
-          ? "/static/images/avatar/2.jpg"
-          : src
-          ? src
-          : user?.profileImage
-          ? image
-          : "/static/images/avatar/2.jpg"
+        src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"
       }
       sx={{
         fontSize: small ? "12px" : "20px",

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -116,7 +116,6 @@ const ProfilePanel = () => {
   // Resets picture-related states and clears interval
   const removePicture = () => {
     errors["picture"] && clearError("picture");
-    setFile({ src: "placeholder" });
     clearInterval(intervalRef.current); // interrupt interval if image upload is canceled prior to completing the process
     setProgress({ value: 0, isLoading: false });
   };
@@ -154,7 +153,6 @@ const ProfilePanel = () => {
 
   // Removes current profile image from UI
   const handleDeletePicture = () => {
-    setFile({ src: "placeholder" });
     // TODO - implement delete picture function
   };
 

Client/src/Features/Auth/authSlice.js

@@ -48,7 +48,7 @@ export const update = createAsyncThunk(
       await new Promise((resolve) => setTimeout(resolve, 1500));
 
       const fd = new FormData();
-      const imageResult = await axios.get(form.file);
+      const imageResult = await axios.get(form.file, { responseType: "blob" });
       fd.append("firstname", form.firstname);
       fd.append("lastname", form.lastname);
       fd.append("profileImage", imageResult.data);