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

Question

为了将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]。

我该怎么解决这个问题？

- shoosh

---

看起来对我来说很相似：https://dev59.com/EG865IYBdhLWcg3wivGi - Petteri H

这是，但那个问题缺乏对这个问题的正确答案，所以我在尝试再次提问。 - shoosh

我会把这个当作一个小烦恼，因为你已经将其归类。这不会影响你的表现。另外，我可以正确地假设在这里jQuery和HTML5 Canvas是无关紧要的吗？你只是因为使用“img src =“...svg”而收到了这个警告吗？ - Phrogz

@shoosh 对，但即使您不创建画布或调用drawImage，您仍然会看到警告，对吗？因此，问题实际上是“为什么Chrome在将SVG作为img引用时会抱怨此MIME类型？” - Phrogz

@shoosh，恐怕我不得不投票关闭这个问题，基于这些处理此类情况的建议。 - Phrogz

Answer 1

这是Chrome捆绑的WebKit代码中存在的一个错误。 WebInspector.Resource._checkWarning（） 调用 WebInspector.Resource._mimeTypeIsConsistentWithType（） 来检查资源的MIME类型。此函数将该值与WebInspector.MIMETypes对象进行比较，其中不包含SVG图像的条目。

这在WebKit trunk中似乎没有修复，因此您应该将其报告为错误。

- Nathan Ostgard