图像无法在带有 DOM 的 IE 中加载：控制台中出现 7009 错误（无法解码）答案

【问题标题】：Images failing to load in IE with DOM: 7009 error (unable to decode) in console图像无法在带有 DOM 的 IE 中加载：控制台中出现 7009 错误（无法解码）
【发布时间】：2015-03-12 03:11:44
【问题描述】：

在 IE 中的单个页面上加载许多图像时（在 IE11 中重现），其中一些开始无法加载，并且在控制台中出现类似于以下警告的内容：

DOM7009：无法在 URL 处解码图像：'[some unique url]'。

当我查看网络流量时，似乎确实从服务器收到了针对这些图像中的每一个的有效响应。每次都不总是相同的图像。如果我使用开发工具强制重新加载图像（例如：我更新 url 以包含一些无关的 url 参数“&test=1”），它会正常加载/渲染而不会出错。我已经用不同类型的图像（jpegs/pngs；下面包含的示例 png）重现了这种行为。随着图像数量的增加，这种情况似乎会更频繁地发生，并且可能与每张图像的大小有一定的相关性。

关于可能导致此问题的任何想法？潜在的解决方法？任何帮助表示赞赏。

【问题讨论】：

我们能看到一些给你这个错误的图像吗？它们是 dataURL 图像吗？
它们不是，每个都有一个“src”属性指向我们的 asp.net 应用程序中公开的端点。每个图像（及其对应的 url）代表特定文档的特定页面。该服务负责将原始内容（以多种格式之一）转换为 PNG 以发送到浏览器。我在上面的系统中添加了一个这样的 PNG 示例，尽管我不确定 SO/imgur 会对图像进行什么额外的压缩。
我创建了一个 jsbin 页面来演示这个错误 - jsbin.com/xegularomu。但是，这指向上面的同一个 imgur 链接，如果经常运行，我预计 imgur 会开始限制流量。我可以在 IE11 中始终如一地重现它（通常在 200 张左右的图像中开始失败）
我也看到了这些错误，为 FlexSlider 加载了图像。不过，所有这些都显示在滑块中。
我在 WinJS 应用程序中看到同样的错误，当只使用两个图像时（并切换标签的 src="" 属性）。会及时通知您我发现的任何内容。

标签： javascript html internet-explorer dom

【解决方案1】：

我在使用 IE11 时经常遇到同样的问题，但我无法确定是什么原因造成的。但是，它在 JavaScript 崩溃后立即开始发生。我不是 imgur 问题，是 IE11 问题。

我能够摆脱这个问题的唯一方法是让资源管理器崩溃并重新加载或重新启动。

【讨论】：

【解决方案2】：

如果它有任何用处，我已经在我的 WinJS 应用程序上看到了它，我相信这是渲染器报告它内存不足的一种方式（尽管很神秘！）

我这么说的原因是，如果我加载一个压缩的 png 图像，比如 500KB，但像素尺寸很大，我就会遇到这个问题。

例如

如果我尝试使用 20000 x 6000 的图像，我偶尔会收到此错误，我猜这是因为它是 20000 x 6000 x 4（480,000,000 字节）或 ~480MB。

如果我用 14000 x 6000 试试这个，它会是 ~336MB，这看起来不错，我还没有收到错误。

如果我尝试使用 35000 x 20000 的图像 ~2.8GB，它总是会发生。

【讨论】：

【解决方案3】：

由于在父应用程序 web.config 中设置了 X-Content-Type-Options 标头，因此我在 IIS 中托管的站点中遇到了这个问题，如下所示：

<system.webServer>   
 <httpProtocol>    
  <customHeaders>    
   <add name="X-Content-Type-Options" value="nosniff" />    
  </customHeaders>    
 </httpProtocol> 
</system.webServer>

在应用程序 web.config 中删除它修复了它：

<remove name="X-Content-Type-Options" />

【讨论】：

【解决方案4】：

我面临的问题是相似的。我有一个 Java Web 应用程序，它通过 Servlet 请求显示文档的页面和缩略图，它响应浏览器发送 PNG 图像。就像@user1069816 所说，响应到达时带有导致“无法解码图像”问题的标题：

X-Content-Type-Options: nosniff

在我的例子中，这个头文件是由 Spring Security 引入的。除了这是一个security mechanism for Internet Explorer to avoid XSS attacks，在响应中禁用此标头的最快解决方案是将以下行放在Spring Security的应用程序上下文文件headers部分：

<http use-expressions="true" create-session="never" auto-config="true">
    <headers>
        <!-- this section disable put the header 'X-Content-Type-Options' -->
        <content-type-options disabled="true"/>
    </headers>

这个问题只发生在 Internet Explorer 11 上。不在 Chrome 或 Firefox 中。

【讨论】：

有没有其他方法可以达到同样的效果。如果我们禁用，它将禁用安全性。

【解决方案5】：

我在一个本质上是一个图片库的页面上遇到了同样的错误，其中每个图片都以全分辨率作为缩略图加载。页面重量约为 220mb。一些缩略图没有加载，原因是“无法在 url 解码图像”错误。

但是，IE 可以通过直接查看图像的 URL 来单独加载每个图像，我认为这意味着图像类型/编码没有问题。因此，虽然 IE11 可以加载单个图像，但它无法将所有图像加载为缩略图（每次刷新页面时，未加载的图像都会更改）。

我的解决方法是在页面上显示一个低分辨率缩略图（页面重量更改为 220kb），并将缩略图链接到完整的高分辨率图像。

如果您可以减小所提供图像的尺寸以及文件大小，则值得检查。

【讨论】：

【解决方案6】：

我也遇到过这个错误——IE 11.0.9600.18059。根据我的测试，这几乎可以肯定是由于选项卡消耗的内存量（例如：添加额外的 DOM 元素会增加内存使用量）——不要与通过网络加载的数据量混淆。

使用内存分析器，我发现一旦内存使用量达到 1.5GB 左右的上限，就会发生错误。这导致了以下奇怪现象：

某些图像会被加载，但不会呈现。它们会在页面中显示为空白区域（尺寸正确），就好像图像已设置为 visibility: hidden。
某些图像会被加载，但无法解码。它们会显示为带有 X 的小黑框。这些图像还会在控制台中显示 DOM7009 错误。
Flash SWF 将显示为黑框。
其他随机的怪事。

每次我重新加载页面时，不同的图像/SWF 都会受到影响。

我的解决方案是简单地调整页面的设计方式，这样就不会导致 IE 消耗太多内存。

【讨论】：

【解决方案7】：

我遇到了类似的问题，在 HTTP 标头中将文件报告为 JPEG，但实际上是 PNG。更改文件类型以匹配文件或删除“X-Content-Type-Options”标头解决了问题。

【讨论】：

具有相同的 png/jpg 混合，但不是标题，而是错误的实际文件结尾。原来 Chrome 允许使用 foo.png 调用 foo.jpg（反之亦然），它会正确显示，但 IE（可能还有其他浏览器）不允许它，因此找不到图像。

【解决方案8】：

当我加载图像时在 IE11 中遇到了同样的问题，它给了我一个错误：

DOM7009: Unable to decode image at URL

在所有其他浏览器中，它就像一个魅力！！

经过一番研究，终于得出如下结论：

在 Web.config 文件中::

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-Frame-Options" value="Deny" />
        <remove name="X-Powered-By" />
        <add name="X-XSS-Protection" value="1" />
        <!--To resolve the user image not displaying in the chat and in the header for IE 11--> 
        <!--<add name="X-Content-Type-Options" value="nosniff"/>-->
      </customHeaders>
    </httpProtocol>
</system.webServer>

请查看我已删除“X-Content-Type-Options”的注释代码，它有效！！！

【讨论】：

【解决方案9】：

我刚才遇到了这个问题，当时图像约为 2.5MB (.jpg)。将其缩小到 540kb，问题不再出现。看起来这绝对是 IE 内存问题（或者在某些情况下可能）。

这是唯一对我有用的修复方法，因为我的网络配置中没有与 X-Content-Type-Options 相关的任何内容。

【讨论】：

【解决方案10】：

看起来实际问题已在another Stack Overflow question 中得到解决。这里的所有答案都以各种方式解决了这个问题，但这很可能发生，因为文件不是它声称的格式。由于启用了nosniff，浏览器无法解决此问题，并尝试解码错误的图像类型。

换句话说：您的文件扩展名与实际编码不匹配

【讨论】：

哇！这个线程上的某个人实际上对如何修复而不是不安全的解决方法有一个有效的答案！投出你的第一票！
底线是：始终检查您提供的实际类型文件！谢谢！

【解决方案11】：

我发现解决此问题的唯一方法是通过浏览器在 apache 服务器配置中禁用此规则。

 BrowserMatch MSIE explorer
 Header set X-Content-Type-Options nosniff env=!explorer

它对我有用，但这个解决方案不喜欢我。我宁愿在 apache 服务器中重写正确的 mime 类型。

我的问题是 URL 包含“验证码”字符串，但我无法设置它。

SetEnvIf Request_URI ^(.*)captcha$ headerpng 
Header set "Content-type image/png" env=headerpng

这不会t work. It's a little frustrating. It's a url so long and I thing that **SetEnvIf** doesnt 读到最后。

【讨论】：