Compressed img & fixed img in postpage

client/src/pages/CommunityPage.tsx

@@ -261,8 +261,7 @@ export default function CommunityPage() {
                           <img
                             src={`${config.serverAddress}/post/post-image/${post.id}`}
                             className="w-[300px] h-auto rounded-lg object-cover"
-                            onError={() => handleImageError(post.id)}
-                          />
+                            onError={() => handleImageError(post.id)} />
                         </div>
                       )}
                     </div>

client/src/pages/PostPage.tsx

@@ -54,10 +54,18 @@ const PostPage: React.FC = () => {
 
   useEffect(() => {
     if (id) {
+      console.log("useEffect for fetching post called, id:", id);
       instance.get(`${config.serverAddress}/post/${id}`)
-        .then((res) => setPost(res.data))
+        .then((res) => {
+          setPost(res.data);
+          console.log("Post fetch successfully");
+        })
         .catch((error) => console.error("Error fetching post:", error));
     }
+  }, [id]);
+
+  useEffect(() => {
+    console.log("PostPage component mounted");
   }, []);
 
   useEffect(() => {
@@ -189,7 +197,8 @@ const PostPage: React.FC = () => {
                     </div>
                     {!imageErrorFlags[post.id] && post.postImage && post.postImage !== null && (
                       <div>
-                        <img src={`${config.serverAddress}/post/post-image/${post.id}`}
+                        <img
+                          src={`${config.serverAddress}/post/post-image/${post.id}`}
                           alt="PostImage"
                           className="w-[300px] h-auto rounded-lg object-cover"
                           onError={() => handleImageError(post.id)} />

server/routes/post.js

@@ -61,6 +61,17 @@ router.post(
 
       let postImage = files.postImage ? files.postImage[0].buffer : null;
 
+      // Resize and compress image if it exists
+      if (postImage) {
+        postImage = await sharp(postImage)
+          .resize(512, 512, {
+            fit: sharp.fit.inside,
+            withoutEnlargement: true,
+          })
+          .jpeg({ quality: 80 })
+          .toBuffer();
+      }
+
       // Process valid data
       let result = await Post.create({ ...data, postImage });
       res.json(result);
@@ -82,7 +93,6 @@ router.post(
 router.get("/", async (req, res) => {
   let condition = {
     where: {},
-    attributes: { exclude: ["postImage"] },
     order: [["createdAt", "DESC"]],
   };
 
@@ -102,9 +112,8 @@ router.get("/", async (req, res) => {
 
 router.get("/:id", async (req, res) => {
   let id = req.params.id;
-  let post = await Post.findByPk(id, {
-    attributes: { exclude: ["postImage"] },
-  });
+  let post = await Post.findByPk(id);
+
   if (!post) {
     res.sendStatus(404);
     return;
@@ -172,6 +181,14 @@ router.put(
 
       // Include the postImage if present 
       if (postImage) {
+        postImage = await sharp(postImage)
+          .resize(512, 512, {
+            fit: sharp.fit.inside,
+            withoutEnlargement: true,
+          })
+          .jpeg({ quality: 80 })
+          .toBuffer();
+
         data.postImage = postImage;
       }