The issue was that when I want to view images, I was not able to view them.

The problem was that there are two types of image URLs. One is images that are already saved in the database and the server, they have a URL like:

images-1739807599842-978593589.png (719×1287)

However, when I try to upload some photos, these images are not in the database yet, they only exist on the web. To solve the problem, in the PostForm component, where the user can upload images and preview them, I added the code to check what each photo is. If it is a newly uploaded photo, the URL formatting needs to be different from the photos that are coming from the database.

{
    imagePreviews.map((url) => {
        function formatImagePath(fullPath: any): any {
            if (fullPath == null) {
                return null;
            }
            
            // Replace the directory part with '/uploads'
            console.log("Formatting image path: ", fullPath);
            
            // For the images that are already there, use the url. 
            // For newly uploaded images, we need to use blob.
            let result: string = "";
            
            console.log(fullPath.includes("var/www"));
            console.log(fullPath.includes("uploads"));
            
            if (fullPath.includes("uploads")) {
                result = fullPath.replace(
                    '/nyush_exchange_platform_server/var/www/uploads',
                    '/uploads'
                );
            } else {
                // This means that the image is newly uploaded, so is a blob
                result = fullPath;
            }

            console.log("imageformat: ", result);
            return result;
        }

Also on the backend, when the post is edited, some images will be new images, some images will be deleted and some images will remain as it is. So, there needs to be a check on each image to determine its fate.

What I did is I first get the imageURLs from the database, and I compare it with what comes from the client. If it is in the database but not in the client, I delete it. if it is in both, it can remain as it is. If it is only in the client side, I need to add the new image.

// Delete original images that are not in the imageURLs
const result = await client.query(getImageUrlsQuery, [postId]);

if (result.rows.length > 0) {
    let validImageURLs = Array.isArray(imageURLs) ? imageURLs : [];
    
    // Find images that should be deleted
    const imagesToBeDeleted = result.rows.filter((row: any) => {
        for (let image of validImageURLs) {
            if (encodeURI(image) === encodeURI(row.image_url)) {
                return false;
            }
        }
        return true;
    });

    console.log('images to be deleted', imagesToBeDeleted);
    
    // Process deletion of images
    const imageUrls = imagesToBeDeleted.map((row: any) => row.image_url);
    for (const imageURL of imageUrls) {
        // Remove from database
        await client.query(delete_image_query, [imageURL]);
        
        // Remove from filesystem
        const imagePath = path.resolve(
            '/nyush_exchange_platform_server/var/www/uploads',
            path.basename(imageURL)
        );
        
        unlink(imagePath, (err) => {
            if (err) {
                console.error("Failed to delete image file:", err);
            } else {
                console.log("Image file deleted successfully:", imageURL);
            }
        });
    }
}

// Insert new images
if (images) {
    for (let image of images) {
        const normalizedPath = image.path.replace(/\\\\+/g, '/');
        await client.query(insertNewImageQuery, [
            uuidv4(),
            postId,
            normalizedPath
        ]);
    }
}