Chrome浏览器没有以图片/ svg + xml格式加载SVG文件 [英] Chrome is not loading SVG File as image/svg+xml

问题描述

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

 < 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中的错误（如这个SO回答）？如果是这样，是否有解决方法以另一种方式加载SVG文件（例如，可能是嵌入标签）？注意，IE的调试器（F12）正确地标识了键入为 image / svg + xml ，并按预期显示图像。

编辑：是一个服务器端的问题（谢谢@robertc）我已经添加了文件由SharePoint提供的事实，它怀疑SharePoint可能无法识别MIME类型。 解决方案

在 img 元素上没有属性 type ，您需要设置MIME类型在服务器上正确。在IIS7及以上版本中，您可以在 web.config中指定MIME类型映射

/ code>文件在 system.webServer 部分：

 < staticContent> 
 < / staticContent> 
  

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

I have a SharePoint web page that references a SVG file stored in the RootFolder of a SharePoint list inside the img tag:

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

The image is rendered correctly in IE9 on the desktop as well as on iOS devices (Safari). However, in Chrome on Windows (I am using v14 at the moment) it fails to display. It instead renders the broken image icon.

The networking tab in Chrome reveals that the file 1.svg is downloaded as application/octet-stream (and hence the incorrect rendering). What do I need to change so that Chrome is recognizing the MIME type correctly (as specified in the tag)? Could it be a bug in Chrome (as suggested in this SO answer)? If so, is there a work-around to load the SVG file in another way (e.g., embed tag maybe)?

Note that IE's debugger (F12) correctly identifies the type as image/svg+xml and hence renders the image as expected.

Edit: Since it appears to be a server-side issue (thanks @robertc) I have added the fact that the file is served by SharePoint, suspecting that SharePoint might not recognize the MIME type.

解决方案

There is no attribute type on the img element, you need to set the MIME type correctly on the server. I think it only works in IE because it's doing content sniffing.

On IIS7 and above you can specify MIME type mappings in the web.config file in the system.webServer section:

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

After that it should work in all browsers, but you may need to do a force refresh (Ctrl + F5) to get them to request the file again.

这篇关于Chrome浏览器没有以图片/ svg + xml格式加载SVG文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！