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

Images failing to load in IE with DOM: 7009 error (unable to decode) in console

提问by Rob Quick

When loading many images on a single page in IE (reproduced in IE11), some of them begin to fail to load, and have something similar to the following warning in the console:

在IE中单个页面加载多张图片时（IE11中转载），部分图片开始加载失败，并在控制台出现类似如下警告：

DOM7009: Unable to decode image at URL: '[some unique url]'.

DOM7009：无法在 URL 处解码图像：“[某些唯一 url]”。

When I look at the network traffic, there does appear to valid responses received for each of these images from the server. It's not always the same images each time. If I use the dev tools to force the image to reload (example: I update the url to include some some extraneous url parameter "&test=1"), it loads/renders normally without error. I've reproduced this behavior with different types of images (jpegs/pngs; example png included below). It seems to happen more frequently as the number of images go up, and may also have some correlation with the size of each image.

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

Any thoughts as to what might be causing this? Potential work-arounds? Any help is appreciated.

关于可能导致这种情况的任何想法？潜在的解决方法？任何帮助表示赞赏。

回答by lordscarlet

It looks like the actual problem is addressed in another Stack Overflow question. All of the answers here get around the issue in various ways, but this is likely happening because the file is not the format it claims to be. Because nosniffis enabled, the browser is unable to work around this issue, and attempts to decode the wrong image type.

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

In other words: Your file extension does not match the actual encoding

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

回答by user1069816

I had this problem in a site hosted in IIS due the X-Content-Type-Options header being set in a parent applications web.config like this:

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

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

Removing it in the applications web.config fixed it:

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

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

回答by Richard Jones

I had a similar problem where a file was reported in the HTTP headers as a JPEG but was in fact a PNG. Changing the filetype to match the file or removing the "X-Content-Type-Options" header fixed the problem.

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

回答by Rafael Fontoura

The problem I was facing off was similar. I have a Java web application which shows pages and thumbnails of a document through Servlet requests, which responds to the browser sending PNG images. Like @user1069816 said, the responses were arriving with a header that was causing the problem "Unable to decode image":

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

X-Content-Type-Options: nosniff

In my case, this header were introduced by Spring Security. Besides this is a security mechanism for Internet Explorer to avoid XSS attacks, the fastest solution to disable this header on response were putting the following line on the application context file of Spring Security, headerssection:

就我而言，此标头是由Spring Security引入的。除了这是Internet Explorer 避免 XSS 攻击的安全机制之外，在响应中禁用此标头的最快解决方案是将以下行放在 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>

This problem were only happening on Internet Explorer 11. Not in Chrome or Firefox.

此问题仅在 Internet Explorer 11 上发生。在 Chrome 或 Firefox 中没有。

回答by ivanreese

I've encountered this error as well —?IE 11.0.9600.18059. According to my testing, it was almost certainly due to the amount of memory consumed by the tab (eg: adding extra DOM elements increases the memory usage) —?not to be confused with the amount of data loaded over the network.

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

Using the memory profiler, I found that errors occurred once memory usage hit a ceiling around 1.5GB. This caused the following weirdness:

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

1. Some images would be loaded, but wouldn't render. They'd show up as an empty space in the page (with the correct dimensions), as though the image had been set to visibility: hidden.
2. Some images would be loaded, but would fail to decode. They'd show up as a small black box with an X. These images would also show a DOM7009 error in the console.
3. Flash SWFs would show up as black boxes.
4. Other random weirdness.

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

Different images/SWFs would be affected each time I reloaded the page.

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

The solution for me was to simply adjust the way the page is designed, so it's not causing IE to consume as much memory.

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

回答by dougajmcdonald

If it's of any use I have been seeing this on my WinJS application and I believe it's a way of renderer reporting that it's out of memory (albeit cryptically!)

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

Reason I say that is that if I load an compressed pngimage which is say 500KB, but large in terms of pixel dimensions I get this problem.

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

E.g.

例如

If I try this with a 20000 x 6000 image I get this error sporadically, which I'm guessing is because it's 20000 x 6000 x 4 (480,000,000 bytes) or ~480MB.

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

If I try this with a 14000 x 6000 it would be ~336MB which seems OK and I have yet to get the error.

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

If I try this with a 35000 x 20000 image ~2.8GB it always happens.

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

回答by Trilok Pathak

Got the same issue in the IE11 when I load images it was giving me an error:

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

DOM7009: Unable to decode image at URL

DOM7009: Unable to decode image at URL

In all other browsers, it works like a charm!!

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

After a bit of the research finally came on the conclusion as below:

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

in the Web.config file::

在 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>

Please see the commented code I have removed the "X-Content-Type-Options" and it works!!!

请参阅我已删除“ X-Content-Type-Options”的注释代码并且它有效！！！

回答by Lyall

I had this problem just now when the image was ~2.5MB (.jpg). Shrunk it down to 540kb and the problem no longer occurs. Looks like it's definitely an IE memory issue (or can be in some occasions).

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

This is the only fix that worked for me as I didn't have anything relating to X-Content-Type-Optionsin my web config.

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

回答by pnairn

I experienced this same error on a page that was essentially an image gallery, where each image was being loaded at full resolution as the thumbnail. The page weight was approx 220mb. Some of the thumbnails weren't loading, and the "unable to decode image at url" error was being given as the reason.

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

However, IE could load up each image individually by viewing the image's URL directly, which I think means there wasn't a problem with the image type/encoding. So while IE11 could load up the individual image, it couldn't load up all the images as thumbnails (and the images that weren't loaded changed each time the page was refreshed).

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

My workaround was to display a low res thumbnail on the page (page weight changed to 220kb), and have the thumbnail link to the full, hi-res image.

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

It would be worth checking if you can reduce the dimensions of the images served, and also the file size.

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

回答by Pablo Luna

The only way that I found to solve this is disable this rule by browser in apache server configuration.

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

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

It work for me but this solution doesnt like me. I would prefer to rewrite in apache server the correct mime-type.

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

My problem is that the URL contains the "captcha" string, but I can`t set it.

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

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

This doesnt work. It's a little frustrating. It's a url so long and I thing that **SetEnvIf** doesnt read it until the end.

这不t work. It's a little frustrating. It's a url so long and I thing that **SetEnvIf** doesn读它直到结束。