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

Question

我有一种情况,css背景图像无法加载我的webapp.奇怪的是,他们正在使用绝对路径(以"/"开头)并且路径是正确的.

当我期望带有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指定时为什么不加载？是否有一些我不知道的晦涩难懂的规则？

更多信息:

网络服务器是龙卷风http服务器,我以前没有任何这样的问题.我真的看不出任何理由为什么在CSS请求时不会提供图像,就像它们一直有的那样.

相同的代码在我的开发环境中运行良好:https://darrel.hubble.in/#subscriptions,但是我害怕将任何东西都投入生产,直到我在qa环境中解决这个问题.两者之间的唯一区别是darrel.hubble.in,一个有效的,在一个elasticbeanstalk实例实例中运行,而qa.hubble.in,一个有这个神秘问题的,正在一个常规的amazon ec2实例中运行.很难想象这会导致这种情况.

编辑(解决方案):

这似乎是龙卷风StaticFileHandler为svg文件提供内容类型的方式中的一个错误.

为了解决这个问题,我将tornado.web.statcifilehandler子类化了(由于其他原因我还是继承了它),并添加了这个:

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

Answer 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有关于为SVG设置Apache和其他服务器的完整说明