-2

所以这是我使用 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;
}

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

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

4

1 回答 1

0

阅读如何解析相对 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...这是错误的路径。

于 2021-08-30T14:57:05.510 回答