[FIXED] Why does my VS Code Live Server Extention show images when open on browser but images don't show when opening it with index.html file

Issue

So here is the issue I use VS Code and the live server exstention. but now when I open the website with Go Live in VS Code then the images i have inserted in the website displays perfectly as the should whut then when I open the website on the index.html file then I only het the alt text thats but in the html and the images dont display.

I have doulble and triple checked the paths and I also have moved the images to a new folder and changed the name and then changed all the sources in the HTML code but it did not change anything at all, I also tried using different browsers (Chrome, firefox, microsoft edge) did not find anything

<img
   class="section-main--img1"
  src="/img/3 items.png"
  alt="Picture of all 3 colors"
/>
<img
  class="section-main--img2"
  src="/img/all 3.png"
  alt="Picture of all 3 items"
/>

.section-main--img1 {
  width: 70%;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
}

.section-main--img2 {
  width: 60%;
  justify-self: center;
  align-self: center;
  grid-column: 3;
  grid-row: 3;
}

I have more images in my project but all of them are done in the exact same way.

Can someone help me with this issue please?

Solution

Read up on how relative URLs are resolved. They are relative to the URL of the HTML document. If you change the URL of the HTML document then the relative URL will resolve differently.

If you open http://localhost/index.html then /img/3 items.png is going to resolve to http://localhost/img/3 items.png

If you open file:///c/users/me/mywebsite/index.html then /img/3 items.png is going to resolve to file:///c/img/3 items.png … which is the wrong path.

Answered By - Quentin

Answer Checked By - Marie Seifert (PHPFixing Admin)