为什么路径正确时无法从 CSS 加载图像，但直接输入 URL 时会加载？答案

【问题标题】：Why would an image fail to load from CSS when the path is correct, but loads when URL entered directly?为什么路径正确时无法从 CSS 加载图像，但直接输入 URL 时会加载？
【发布时间】：2014-12-03 12:47:18
【问题描述】：

我的 web 应用程序无法加载 css 背景图像。奇怪的是他们使用的是绝对路径（以“/”开头）并且路径是正确的。

当我期望该元素具有 DOM Inspector 时，firefox 给出错误“无法加载图像”。但是，如果我单击该链接，图像会在新选项卡中打开，显示路径正确。

演示：https://qa.hubble.in/#subscriptions

在此页面的右上角，有五个正方形。这是主应用导航菜单，应该有图标。如果您右键单击并选择最左边的“检查元素”，检查器将在“a title=Dashboard”元素上打开。如果你去它的父母，“li class=nav_dashboard”你可以看到我在说什么。

检查器中的 CSS 显示如下：

ul.nav-tabs li.nav_dashboard, li.nav_dashboard.active {
    background-image: url('/images/icons/liveViewInactive.svg');
}

然而，令人烦恼的是，如果你在浏览器中打开https://qa.hubble.in/images/icons/liveViewInactive.svg，你可以看到这个图标。为什么从 CSS 指定时不加载？是否有一些我不知道的晦涩规则？

更多信息：

网络服务器是tornado http服务器，我以前没有遇到过这样的问题。我真的看不出有任何理由为什么在 CSS 请求时无法提供图像，就像它们一直以来的方式一样。

相同的代码在我的开发环境中运行良好：https://darrel.hubble.in/#subscriptions，但我害怕将任何东西推送到生产环境中，直到我在 qa 环境中解决这个问题。两者之间的唯一区别是 darrel.hubble.in 运行在一个 elasticbeanstalk 实例实例中，而 qa.hubble.in 存在这个神秘问题，它运行在一个普通的亚马逊 ec2 实例中.很难想象这是怎么造成的。

编辑（解决方案）：

这似乎是 tornado StaticFileHandler 为 svg 文件提供内容类型的方式中的一个错误。

为了修复它，我对 tornado.web.statcifilehandler 进行了子类化（出于其他原因，我还是将其子类化了），并添加了以下内容：

if ".svg" in self.absolute_path:
    self.set_header("Content-Type", "image/svg+xml")

【问题讨论】：

css 文件是否位于 qa.hubble.in 上？
因为路径基于 css 文件位置。
@epascarello：在这种情况下是吗？对我来说，这看起来像是一个相对于根目录的 URL（但显然，我可能弄错了）。
stackoverflow.com/questions/2718532/…
root 相对于 .css 文件 @DavidThomas。如果 css 文件位于不同的域中，它将指向该不同域的根。

标签： javascript css tornado

【解决方案1】：

在加载您引用的网页时检查控制台，所有 SVG 均出现以下错误：

Resource interpreted as Image but transferred with MIME type text/html

您需要设置服务器以将这些图像传输为 SVG，类型为 image/svg+xml。在 Apache 服务器上，只需将其添加到 .htaccess 文件或服务器配置中即可：

AddType image/svg+xml svg

清除浏览器上的缓存并重新加载页面。

Planet SVG has full instructions on setting up Apache and other servers for SVGs

【讨论】：