0

i am practicing html using my computer and i run the html file using the "Live Server" add-on in vscode. the image doesnt show up with the relative path:

<img src="../html/images/coffee background.jpeg" alt="tx"/>

my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.

the image is stored in the images folder inside the html folder, which is stored in the folder above the css.

using inspect element on the img link in the browser this shows up: Cannot GET /html/images/coffee%20background.jpeg

i'm pretty sure this relative path is correct because when i click "follow link" in vs code when i hover over the link, the image shows up in vs code. why isn't the image displaying when i run the html file?

nubprog
  • 35
  • 10

1 Answers1

0

In a Web server, you cannot get lower than the Web root, while in VSCode, you can (you can drill down to the disk root, I imagine).

So when you say,

my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.

this means that you cannot enter a "sibling" folder of css. Just as, when running and your root is /var/www/customer1_pages, you obviously cannot access "../customer2_pages/passwords.txt".

../html/images (but also ../../../html/images etc.) is the same thing as /html/images, and (for the web server) means <ROOT>/html/images, which in your filesystem would be css/html/images.

You need to set the root folder to html, and place the index there. Or move images inside css.

LSerni
  • 55,617
  • 10
  • 65
  • 107