Display images from API static folder on the client side in MERN application

Question

I've got a MERN application that stores images to MongoDB. however, when trying to read the database and display the image back in the client application I keep getting the broken image icon.

I'm using Multer to successfully upload and store the images in the "/images" folder on the API side. I'm able to SEE the files being uploaded into that folder. I'm also using Path to declare the /images folder as a static folder.

on the client side I'm able to query the posts, get back the appropriate filename in the post.photo attribute and build up the source file location using a hard-coded PF constant (public folder). I'm logging out to the console that URL and when I copy and paste that built URL directly into a browser with the server running I'm able to see the picture successfully.

however, when using the URL for the image "src" I'm getting a broken image icon as shown.

I'll try to include a VERY watered down version of the code showing only relevant parts. any help would be greatly appreciated.

[Server Side][1] [1]: https://i.stack.imgur.com/HkDbs.jpg

[Client Side][2] [2]: https://i.stack.imgur.com/fJnXg.jpg

[Console App][3] [3]: https://i.stack.imgur.com/KSunR.png

Answer 1

After weeks of wrestling with this I was finally able to get images to show in my client app! hopefully this helps someone else who might be having the same issue.

1. removed Helmet from the server side index.js file (it was part of a video instruction that I was following)
2. added a space-separated WHITELIST environment variable in the server-side .env file (ex: WHITELIST=http:http://localhost:3000)
3. then added the following code to my index.js code

code sample

Finally, somewhere along in the process I started getting "net::ERR_UNSAFE_PORT" errors showing up in my console. I wound up having to explicitly note my server ports like this "--explicitly-allowed-ports=5000,6000" in my browsers shortcut property by following the instructions noted here

https://superuser.com/questions/188006/how-to-fix-err-unsafe-port-error-on-chrome-when-browsing-to-unsafe-ports

that seemed to fix the issue for me!