为什么我的 VS Code Live Server Extension 在浏览器中打开时显示图像，但在使用 index.html 文件打开时不显示图像

Question

所以这是我使用 VS Code 和实时服务器扩展的问题。但是现在，当我在 VS Code 中使用 Go Live 打开网站时，我插入网站的图像会完美显示，然后当我在 index.html 文件上打开网站时，我只需要 alt 文本就可以了但在 html 中，图像不显示。

我对路径进行了双重和三次检查，我还将图像移动到一个新文件夹并更改了名称，然后更改了 HTML 代码中的所有来源，但它根本没有改变任何东西, 我也尝试过使用不同的浏览器 (Chrome, firefox, microsoft edge) 没有找到任何东西

<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;
}

我的项目中有更多图像，但所有图像都是以完全相同的方式完成的。

有人可以帮我解决这个问题吗？

Answer 1

阅读有关如何解析相对 URL 的信息。它们与 HTML 文档的 URL 相关。如果您更改 HTML 文档的 URL，则相关的 URL 将以不同的方式解析。

如果您打开 http://localhost/index.html，那么 /img/3 items.png 将解析为 http://localhost/img/3 items.png

如果您打开 file:///c/users/me/mywebsite/index.html，那么 /img/3 items.png 将解析为 file:///c/img/3 items.png ……这是错误的路径。

为什么我的 VS Code Live Server Extension 在浏览器中打开时显示图像，但在使用 index.html 文件打开时不显示图像

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

html

css

visual-studio-code

browser

liveserver