构建 HTML/CSS 页面但无法加载图像答案

【问题标题】：Building an HTML/CSS page but images won't load构建 HTML/CSS 页面但无法加载图像
【发布时间】：2019-06-21 06:25:32
【问题描述】：

我正在用 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”容器中，但是当我在浏览器中保存和刷新文件时没有任何反应。

这是我的第一个网站（也是我在这里的第一篇文章），因此非常感谢任何反馈。谢谢！

【问题讨论】：

标签： html css image

【解决方案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的好信息

【讨论】：

【解决方案2】：

您可能对 html 文件的位置有疑问。您可能只需要将图片的 url 更改为：

background-image: url('../css/images/download');

如果您的 html 文件位于 css 文件夹或 images 文件夹中，它将无法正确加载。

如果一切都失败了，就这样做：

background-image: url('http://connerring.com/css/images/download.jpg');

【讨论】：

我实际上已经尝试过几次更改路径，但似乎并没有解决问题。我首先使用 Visual Studio 中的文件选择器创建路径，但随后它没有显示在浏览器中。虽然，在 AWBrown 发表评论后，我在隐身模式下检查了托管版本并且图像出现了，但由于某种原因它重复而不是填充。（它仍然没有出现在我的本地版本中）
如果你想让图片填满方框，你需要使用 background-size:cover，它会填满图片所在的方框。

【解决方案3】：

看来你要么想通了，要么有别的东西挡住了你的路。我可以清楚地看到http://[site name redacted].com/css/images/download.jpg 有一张图片。我还可以看到页面底部覆盖在图片上的 Hello and Goodbye。

祝你的项目好运！

【讨论】：

哦，哇，它在 Chrome 中不起作用，但隐身会话显示了它。我必须有一个缓存版本或其他东西。谢谢！