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

似乎您发现了它或其他东西挡在了您的身边。我可以清楚地看到http://[site名称已编辑] .com / css / images / download.jpg包含图片。我还可以看到页面的底部，上面写着“你好，再见”。

最好的项目！

Answer 2

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

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

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

如果其他所有方法都失败，请执行以下操作：

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

Answer 3

看起来您是从驱动器而不是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

，这里有一些很好的信息

建立HTML / CSS页面，但图像无法加载

3 个答案: