外部 CSS 图像不会加载答案

【问题标题】：External CSS images won't load外部 CSS 图像不会加载
【发布时间】：2015-06-14 16:03:19
【问题描述】：

美好的一天。

我的结构是这样的：

/
  index.html
  style/
    main.css
  images/
  test/
    test.html

/style/main.css 是这样说的：

body {
    background-image: url('/images/SomeImage.png');
    background-color: #000;
}

/index.html 有一个指向这个 CSS 文件的链接，但是，正如标题所说，不会加载任何图像。但它是连接的，因为背景实际上是黑色的，所以其余的样式（但图像）确实有效。

另外，如果我在 /index.html 内部写入相同的样式，背景将会加载。

另外，我创建了 /test/test.html，它只说

<img src="/images/SomeImage.png" />

并且图像显示在该页面上。

因此，显然，出于某种原因，我的 /style/main.css 无法访问文件，而任何其他位置的任何其他文件都无法访问。为什么会这样？语法显然没有错。我迷路了。

【问题讨论】：

你在 index.html 中使用 HTML 'base' 标签吗？
添加 ../ 不是这里的情况。如前所述，/test/test.html 不使用它并且仍然有效。我也有我的本地服务器设置，所以 / 代表根。
@Stefan 不，我不使用。
我注意到它对我对 /style/main.css 文件所做的任何更改都没有反应，所以我用不同的名称保存了相同的 CSS /style/test.css，在 /index.html 和 BAM 中更改了指向它的链接！有用。同一个 /style/ 目录中的两个相似文件。一个按预期工作，另一个没有。这是什么，一个损坏的文件？
我很久以前遇到过一个问题，在使用 ftp 将文件传输到服务器后，我在记事本中对文件所做的任何编辑都会在文件顶部包含一个额外的字符。然后将无法正确提供该文件。我记得当我使用写字板而不是记事本编辑和保存同一个文件时，问题就消失了。我猜这与字符编码有关。

标签： css image directory external

【解决方案1】：

和我一样，我猜 css 中使用的图像必须与 css 文件位于同一文件夹中。我在使用浏览器工具检查时尝试了所有可能的解决方案，唯一可行的是将图像和样式表放在同一个文件夹中。

【讨论】：

看你写的相关路径。

【解决方案2】：

我也有同样的问题。与 Visual Studio 社区合作。

我在浏览器中检查元素，发现文件目录“自动”（我没有这样设置）说我的图像文件夹嵌套在我的 css 文件夹中。还不知道为什么...所以我然后将我的图像文件夹移动到我的 css 文件夹中，看到这是我的浏览器在开发工具中显示给我的...

因此，在使用 css 时，可能出于某种原因，您的图像文件夹中的图像应该位于您的 css 文件夹中，而不是完整的网页文件夹中......它起作用了。

【讨论】：

哦和..所以目前文件目录如下“D:\Coding Tutorials\Learning To Use CSS\FlyInText\css\images”所以它是一个大文件夹......在我的索引中。 html 文件，样式表作为外部样式表链接.. () 不需要 ./ , ../ , ../ 因为样式表已经链接到 Index.html，因此将图像与样式表“css 文件夹”放在同一文件夹中，它将自动在整个文件夹中搜索图像..
.html > () .css > (.browse { background-image: url ('/hello.png'); width:200px; height:100px; color:white; } ) 图片目录 > (D:\Coding Tutorials\Learning To Use CSS\FlyInText\css\images)

【解决方案3】：

好的，基本上，我用它的副本替换了不起作用的 /style/main.css（test.css - 在帖子 cmets 中描述）和现在它可以工作了。为什么仍然是问题，但我想问题已经解决了。

【讨论】：

【解决方案4】：

将 ../ 添加到 /images 的开头，使其读取为 ../images/imagename.jpg

你的代码应该是这样的：

body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}

【讨论】：

不行，他的css在css文件夹中，他的代码在css文件夹中寻找images文件夹，需要回溯到父“../”然后寻找images文件夹.
当你在 url 的开头使用 / 时，它意味着'root-relative'。因此，您无需将其更改为相对文件夹。
那你的答案是什么？
我不知道他为什么会遇到这个问题。但我确实知道使用相对于根的 url 不应该是问题。 OP 也说过这不是问题，在这个线程中已经很多次了。

【解决方案5】：

如果你在 /styles/style.css 你需要添加：

../ 2 级返回到根文件夹。

正如罗金所回答的：

background-image: url('../images/SomeImage.png');

是这样做的方法。

要在索引文件中链接 CSS，请使用以下命令：

<link href="./style/style.css" rel='stylesheet' type='text/css'>

./ 1 级回到 index.html 内到达根文件夹。

另外你的问题也可能是文件权限问题，当我从我的电子邮件中下载图像并直接使用它们时，我总是会遇到这个问题。

如果您在 Mac 上本地工作：

- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**

如果您直接在实时服务器上工作：

- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image 
- Right click and select file permissions
- set permissions to : **664**

【讨论】：

不，权限没问题。 ../ 不起作用，这里也不是这样。
你可以将整个文件上传到任何网络服务器并分享链接以便我们检查

【解决方案6】：

尝试将网页、css和示例图像临时复制到一个文件夹中。然后只使用图像名称作为 url 看看会发生什么。如果它有效，它将是图像路径，如果不是其他东西..可能是位置..这是您发布的完整 css 吗？

【讨论】：

【解决方案7】：

最初，您的代码看起来不错。

那么你怎么知道图片没有加载呢？查看浏览器的开发人员工具，查看图像是否正在加载、是否返回错误，甚至没有被引用。我的猜测是它正在加载，但由于您的 CSS 中的某些内容而无法显示。

【讨论】：

所以我检查了我的开发工具，我注意到它试图从错误的目录加载图像，例如 /style/images/SomeImage.png 而不是 /images/SomeImage.png/。这对我来说是一件非常出乎意料的事情，因为我已经尝试过 ../ 并且没有成功。然后我注意到它没有对我对 main.css 文件所做的任何更改做出反应，所以我用不同的名称保存了相同的 CSS 文件 test.css，更改了 index.html 和 BAM 中的链接！有用。同一目录中的两个相似文件。一个按预期工作，另一个没有。有什么想法吗？
@IvanChepurin 可能是缓存问题。禁用浏览器的缓存，看看是否有效。

【解决方案8】：

因为您的图像在另一个文件夹中（比样式表更上一层），您需要以“../”开头，以获得相对于样式表的层次结构中的上一层文件夹。所以你需要一个相对 URL：

background-image: url('../images/SomeImage.png');

【讨论】：

我认为没有必要。您应该能够以 / 开头来创建相对于根的 url。
样式表如何知道根在哪里？
因为根在根！