html - Chrome 没有将 SVG 文件加载为 image/svg+xml

Question

我有一个 SharePoint 网页引用了存储在 SharePoint 列表的 RootFolder 中的 SVG 文件，在 img 标签内:

<img src='http://localhost/Lists/MyList/1/1.svg' type='image/svg+xml' />

图像在桌面和 iOS 设备 (Safari) 上的 IE9 中正确呈现。但是，在 Windows 上的 Chrome 中(我目前使用的是 v14)无法显示。它反而呈现损坏的图像图标。

Chrome 中的网络选项卡显示文件 1.svg 被下载为 application/octet-stream(因此呈现不正确)。我需要更改什么才能使 Chrome 正确识别 MIME 类型(如标记中指定的那样)？这可能是 Chrome 中的错误(如 this SO answer 中所建议)？如果是这样，是否有以其他方式加载 SVG 文件的解决方法(例如，可能嵌入标签)？

请注意，IE 的调试器 (F12) 正确地将类型识别为 image/svg+xml 并因此按预期呈现图像。

编辑:由于这似乎是服务器端问题(感谢@robertc)，我添加了文件由 SharePoint 提供的事实，怀疑 SharePoint 可能无法识别 MIME 类型。

Answer 1

img 元素没有type 属性，需要在服务器上正确设置MIME 类型。我认为它只适用于 IE，因为它正在进行内容嗅探。

在 IIS7 及更高版本上，您可以在 system.webServer 部分的 web.config 文件中指定 MIME 类型映射:

<staticContent>
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
</staticContent>

之后它应该可以在所有浏览器中运行，但您可能需要执行强制刷新 (Ctrl + F5) 才能让它们再次请求该文件。