Javascript 为什么路径正确时图像无法从CSS加载，而直接输入URL时图像无法加载？

我有一种情况，css背景图像无法加载到我的webapp中。奇怪的是，他们使用的是以/开头的绝对路径，并且这些路径是正确的

当我期望元素带有DOM检查器时，firefox给出了无法加载图像的错误。但是，如果我单击该链接，图像将在一个新选项卡中打开，显示路径是正确的

演示：

在这一页的右上角，有五个正方形。这是主应用程序导航菜单，应该有图标。如果右键单击并选择最左边的正方形上的Inspect元素，则inspector将在a title=仪表板元素上打开。如果你去它的父级，li class=nav_dashboard，你可以看到我在说什么

inspector中的CSS显示以下内容：

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

然而，令人烦恼的是，如果你在浏览器中打开，你可以看到图标。为什么从CSS指定时不加载？是否有一些我不知道的模糊规则

更多信息：

web服务器是tornado http服务器，我以前从未遇到过类似的问题。我真的看不出有什么理由当CSS请求时，图像不能得到服务，就像它们一直以来的方式一样

同样的代码在我的开发环境中运行良好，但在qa环境中解决此问题之前，我不敢将任何内容推送到生产环境中。两者之间的唯一区别是，darrel.hubble.in（有效）运行在elasticbeanstalk实例中，而qa.hubble.in（存在此神秘问题）运行在常规amazon ec2实例中。很难想象这是怎么造成的

编辑解决方案：

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

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

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

---

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

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

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

AddType image/svg+xml svg

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

---

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

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

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

AddType image/svg+xml svg

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

---

css文件是否位于qa.hubble.in？因为路径基于css文件位置。@epascarello:在这种情况下是吗？对我来说，这看起来像是一个与根相关的URL，但很明显，我可能弄错了。如果css文件位于不同的域中，它将指向不同域的根。css文件是否位于qa.hubble.in？因为路径基于css文件位置。@epascarello:在这种情况下是吗？对我来说，这看起来像是一个与根相关的URL，但很明显，我可能弄错了。如果css文件位于不同的域上，它将指向该不同域的根。