Images not showing up, despite having the correct path-CodePudding

This might be a really stupid question, but here goes nothing

Currently I have the following in my HTML:

<div >
        <img src="../public/images/blueflame.png">
        <img src="../public/images/purpleflamelogo.jpg">
</div>

I have not styled it in my CSS, but AFAIK, this should not be a problem, as the default style sheet should still take care of it.

I also know the path to these images is correct as, when I Ctrl click on it in VSCode, it shows me the image.

This is what it shows instead:

This would suggest, that the path to the images are wrong, however, as previously stated, I do believe the path is correct. Any help would be greatly appreciated!

CodePudding user response：

you can check your console for any 404 messages, and try to close the whole project and re-open it in your editor and browser as you may working on an old version

CodePudding user response：

For people having the same problem in the future, the problem was with express and how static files in express work.

I had the following in my app.js

app.use( express.static( "public" ) );

which meant the root folder for my static assets was actually another directory.

You can read up on it here

CodePudding user response：

relatively path is correct but the files in the public folder are static files such as index.html, javascript library files, images, and other assets, etc. Files in this folder are copied and pasted as they are directly into the build folder. Only files inside the public folder can be referenced from the HTML.

Updated code:

<div >
   <img src="images/blueflame.png">
   <img src="images/purpleflamelogo.jpg">
</div>