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

2022-01-28 06:44:10 标签 htmlcssvisual-studio-codebrowserliveserver

所以这就是我使用VS Code和live服务器扩展的问题。但是现在当我打开网站上线然后在VS代码插入的图片我已经在网站上显示完全当我打开网站应该whut上映index 。 html文件那么我只het alt文本这但是在html和图像不显示。

我doulble三重检查路径和我也有图片搬到一个新文件夹,改变了名字,然后改变了所有HTML代码的来源,但并没有改变任何东西,我也试着用不同的浏览器(Chrome浏览器firefox微软边缘)什么也没找到

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

我在我的项目中有更多的图片,但它们都是用完全相同的方式完成的。

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

###阅读相对url是如何解析的。它们相对于HTML文档的URL。如果你改变HTML文档的URL,那么相对URL将会以不同的方式解析。

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

如果你打开文件:// c/users/me/mywebsite/index。html,那么/img/3 items。png将解析为文件:// c/img/3 items。png…这是错误的路径。

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码