html - 构建 HTML/CSS 页面但无法加载图像

Question

我正在用 HTML/CSS 构建我的第一个网站，但由于某种原因，当我在 Chrome 中加载 HTML 文件时，我的图像都没有显示。当我按 F12 并转到“源”菜单时，我可以看到我的 index.html 文件(应该加载图像的地方)正在创建错误，指出找不到文件(net::ERR_FILE_NOT_FOUND)，即使我使用 Visual Studio 的文件选择器导航到它们，而不是手动键入地址。

以下是该文件的链接，以帮助提供更多上下文(相关区域是页面底部的框): [编辑]/

我已经尝试从 css 样式表中清除我的代码，验证图像地址，但不幸的是，这就是我在学习中目前所知道的尝试。

我要放置图像背景的框的 HTML:

<div class="p-box">
<h1>Hello</h1>
<h2>Goodbye</h2> 
</div>

该框类的 CSS:

.p-box{
    width: 800px;
    height: 500px;
    border: 1px solid #000000;
    margin-top: 30px;
    position: relative;
    background-image:url('/css/images/download.jpg'); 
   }

目标是让图像加载到“p-box”容器中，但是当我在浏览器中保存和刷新文件时没有任何反应。

这是我的第一个网站(也是我在这里的第一篇文章)，非常感谢任何反馈。谢谢!

Answer 1

看起来您正在从驱动器加载图像而不是 check.png

的本地路径

在你的CSS中，找到这个:

list-style-image: url('E:\Desktop\HTML and CSS\CSS Tutorial Files\css\images/check.png');

并更改为

list-style-image: url('/css/images/check.png');

这里有一些关于学习 file paths in the browser 的好信息