1

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

Currently I have the following in my HTML:

<div class="disk-images"> <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: enter image description here

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!

Improve this question
5
  • What is the absolute path of the HTML file on disk, and what are the absolute paths of the two images? Also, do you have some build or deploy step that packages everything up and, e.g., copies it to your web server? I guess what I'm getting at is, when you open the site in the browser, are you viewing the HTML file that you edited in VS code or a copy of it that's been deployed somewhere else? Commented Jan 8, 2022 at 14:21
  • Is your browser also vscode? Open up the network tab in your dev tools and check from which path the images are being loaded. You have the wrong path in your html, i guarantee you. Commented Jan 8, 2022 at 14:26
  • @adv12 Absoloute Path of HTML: "C:\VSCode\JavaScript\connectfour\views\splash.ejs" Absoloute Path of IMG 1 (kept in same directory as IMG 2): "C:\VSCode\JavaScript\connectfour\public\images\purpleflamelogo.jpg" Using express to deploy it locally. Usually the changes are reflected each time I type npm start and that hasn't given me any issues before. Commented Jan 8, 2022 at 14:26
  • Yeah, unfortunately I'm unfamiliar with ejs and how it's deployed, but you may find that, upon deployment, the location of the page actually loaded in the browser differs from the location of your ejs file (relative to the deployed image path) Commented Jan 8, 2022 at 14:42
  • Turns out it was an express shenanigan specified here: stackoverflow.com/a/17755226/16786391 Thanks for the help though! Commented Jan 8, 2022 at 14:43

4 Answers 4

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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 class="disk-images"> <img src="images/blueflame.png"> <img src="images/purpleflamelogo.jpg"> </div>
Improve this answer

Comments

1

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

Improve this answer

Comments

-1

just in case this helps anyone, I was having this issue and I was doing everything I had done in previous projects/lessons while learning but the image still wouldn't show.

I had src="./Resources/Images/books.jpg" and compared to previous files with same format and was stumped. Turns out because I had moved the html files into a separate folder for multiple pages, the ./Resource path was no longer working. I had to but the full path in which worked.

src=

"C:\git_Repositories\Portfolio_Project\Resources/books.jpg"
Improve this answer

1 Comment

Is this a question or an answer to an existing issue you recently had? A bit confusing

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.