404 (Not Found) Image file on web app

Question

I am building a website and along the way I used imgur to store the image that i was using in it but I decided to created a folder in my app to store them. Since I'm not using imgur anymore, i needed to change my path to find the image and that's where the problem appeared, I can't find the image. The structure looks like that:

webapp_folder
    |_node_modules
    |_image_folder
    |_public_folder
    |_views
       |_partials_folder
       |_main.js
    |_app.js
    |_package.json

In main.js , I use one of the image in image_folder and the path to the image looks like: src="../image_folder/image.png" but that's where I got the 404 error. I've tried putting the image in the same folder that the main.js so the path would look like src="image.png" but still getting this error. So i guess it's not a path's problem but I've no idea what it could be.

Hope I could make it clear! I'm using node.js and express.

Answer 1

You need to make routes to the assets.

app.use(express.static('image_folder')

Whenever you are using an asset there are multiple ways to include that in your project.

In your case, whenever an image is loaded it is actually loaded by the browser using network calls from client side. Not server side. So client side code doesn't have access to internal paths (for ex: /usr/local/ kinda paths). Whenever they fetch something it is relative to the host, maybe in your case localhost so, fetching /image.png is fetching localhost/image.png but your app doesn't have route to those image files. So, we make routes for all the assets which is done by express.static

Another way is you can actually require the image. So, bundlers (with proper config) make some public folder and put the assets to that folder. react/vue apps by default do this.