在 <img> 中加载 SVG 时，Chrome 会发出警告

Posted 2023-03-05

【中文标题】在 <img> 中加载 SVG 时，Chrome 会发出警告

【英文标题】：Chrome gives a warning when loading an SVG in an <img>

【发布时间】：2011-07-01 06:07:12

【问题描述】：

为了在画布上显示 SVG 图像文件，我在 html 上添加了以下行：

<img id="soundOnImg" src="img/speaker_on.svg" style="display:none"></img>

然后在画布上绘制它：

ctx2d.drawImage($("#soundOnImg")[0], 10, 10, 200, 200);

（使用 jQuery $() 那里）

这很有效，除了一个烦恼 - Chrome 给了我以下警告：

Resource interpreted as image but transferred with MIME type image/svg+xml.

这个警告是什么意思？

我尝试使用<object> 而不是<img>，但这失败了，因为由于某种原因，对象元素似乎没有[0]。

我该如何解决这个问题？

【问题讨论】：

长得和我很像：***.com/questions/3768565/…

是的，但是这个问题没有正确的答案，所以我再试一次。

我会将此视为您已分类的小烦恼。它不会影响你的表现。而且，我是否正确地假设 jQuery 和 HTML5 Canvas 在这里无关紧要，您会因为拥有 img src="...svg" 而收到此警告？

jQuery 确实无关紧要，但画布却是。如果我不需要在画布上绘制它，我可以使用不同的方式嵌入 SVG，例如使用 <object> 或 <iframe>

@shoosh 是的，但即使您不创建画布或调用 drawImage，您仍然会看到警告，对吗？所以问题真的是“为什么 Chrome 在将 SVG 引用为 img 时会抱怨这种 mime 类型？”

【参考方案1】：

这是与 Chrome 捆绑在一起的 WebKit 代码中的一个错误。 WebInspector.Resource._checkWarning() 调用 WebInspector.Resource._mimeTypeIsConsistentWithType() 来检查资源的 mime 类型。此函数根据WebInspector.MIMETypes 对象检查该值，该对象不包含 SVG 图像的条目。

这似乎在WebKit trunk 中没有得到解决，所以您可能应该report it as a bug。