javascript IE8 不显示图像（红色 x）......有时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4188203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 not displaying images (red x) ... sometimes
提问by Budric
I'm going mad with the following problem which does not happen on any other browser (Chrome, Firefox):
我对以下在任何其他浏览器（Chrome、Firefox）上都不会发生的问题感到非常生气：
- IE8 cache is cleared
- browser starts opens HTML/Javascript page that requests and creates a few images dynamically. This HTML page is served from a Tomcat server localhost:8084.
- Most of the time out of 10 images that are requested IE displays RED X.
- Developer Image Report (F12) shows some images "file size" as correct # bytes, yet the image is still not displayed, or some images file size "unknown bytes" and image doesn't work.
- Sometimes 2-4 out of 10 images show up and the rest fail!
- Sometimes in a mad fury of hitting refresh 1 billion times, the images show up.
- The real kicker is that when I put a break point in my HTTP Server, the socket isn't even opened. IE isn't even attempting to fetch the images from the server before failing.
- And finally if I run the same code but request an image from somewhere like google maps, it works in IE without problems.
- 清除IE8缓存
- 浏览器启动打开 HTML/Javascript 页面，请求并动态创建一些图像。此 HTML 页面由 Tomcat 服务器 localhost:8084 提供。
- IE 请求的 10 个图像中的大多数时间显示 RED X。
- 开发人员图像报告 (F12) 将某些图像“文件大小”显示为正确的 # 字节，但图像仍未显示，或者某些图像文件大小“未知字节”且图像不起作用。
- 有时 10 个图像中有 2-4 个显示，其余的失败！
- 有时在刷新 10 亿次的狂怒中，图像会显示出来。
- 真正的问题是当我在 HTTP 服务器中设置断点时，套接字甚至没有打开。IE 甚至不会在失败之前尝试从服务器获取图像。
- 最后，如果我运行相同的代码但从谷歌地图之类的地方请求图像，它可以在 IE 中正常工作。
Here's my javascript code:
这是我的 javascript 代码：
<script type="text/javascript">
var ctr = 0;
function getImage(url)
{
var img = document.createElement("img");
img.src = url + "&nc=" + ctr;
ctr ++;
img.width = 128;
img.height = 128;
document.body.appendChild(img);
}
for (var i = 0; i < 10; i=i+1)
{
//THIS FAILS MOST OF THE TIME
setTimeout("getImage('http://myHostName:9980/GenerateImageStatic?parameter=1')", 1000);
//THIS WORKS! WHY?
//setTimeout("getImage('http://maps.google.com:80/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=false')", 1000);
}
</script>
For HTTP Server I'm using BOOST sample ASIO HTTP Server LinkI modified it so for any URI request, it sends a png file (I've tried various files to make sure it's not PNG encoding that's bad). The HTTP header has Content-type: "image/png". So correct mime type is sent.
对于 HTTP 服务器，我使用的是 BOOST 示例 ASIO HTTP 服务器链接，我修改了它，因此对于任何 URI 请求，它都会发送一个 png 文件（我已经尝试了各种文件以确保它不是 PNG 编码不好）。HTTP 标头具有 Content-type：“image/png”。因此发送了正确的 MIME 类型。
I've been trying to find a solution for a long time. Read through various posts:
长期以来，我一直在努力寻找解决方案。通读各种帖子：
- Mime type is the problem. Mime type is not the problem in my case. I set the Content-type. I've also used Firefox LiveHTTPHeader plugin to view the headers sent from the server. Except for some cache control headers, my headers are same as what google sends in terms of Content-type:
- Security error. Ok maybe the cross domain images are a security risk. Or something is blocking the request. Well then why doesn't it fail 100% of the time?! Why does IE not request any cross domain images? Yet maps.google.com request works, and mine only works sometimes. Same applies to any firewall or anti-virus. I've also tried running the server on various ports (80, 8080, 9980).
- Javascript error. I think the Javascript is correct. I was actually getting the same problem with GWT. So I thought it was GWT that was the problem. And there was an event bug with IE and GWT related to images. So I simplified the code to just Javascript. no GWT.
- Maybe it's the C++ HTTP Server implementation. It's a possibility. However Firefox and chrome work with the same code without problems.
- Mime 类型是问题所在。就我而言，Mime 类型不是问题。我设置了内容类型。我还使用了 Firefox LiveHTTPHeader 插件来查看从服务器发送的标头。除了一些缓存控制标头，我的标头与谷歌发送的内容类型相同：
- 安全错误。好吧，也许跨域图像存在安全风险。或者有什么东西阻止了请求。那么为什么它不能 100% 失败呢？！为什么 IE 不请求任何跨域图像？然而，maps.google.com 请求有效，而我的请求有时有效。这同样适用于任何防火墙或防病毒软件。我还尝试在各种端口（80、8080、9980）上运行服务器。
- Javascript 错误。我认为 Javascript 是正确的。我实际上在 GWT 上遇到了同样的问题。所以我认为这是 GWT 的问题。并且存在与图像相关的 IE 和 GWT 事件错误。所以我将代码简化为 Javascript。没有 GWT。
- 也许是 C++ HTTP Server 实现。这是一种可能。然而，Firefox 和 chrome 使用相同的代码没有问题。
Any ideas? Thanks.
有任何想法吗？谢谢。
EDITI added myHostName to trusted sites. I also lowered the security settings to low for internal and internet sites. I'm going to try to disable keepalive on the server if enabled. However as I mentioned I don't see IE making an attempt to fetch the image at all. The socket doesn't receive any requests from IE, so removing keep-alive from headers may not help.
编辑我将 myHostName 添加到受信任的站点。我还降低了内部和互联网站点的安全设置。如果启用，我将尝试禁用服务器上的 keepalive。然而，正如我所提到的，我根本没有看到 IE 试图获取图像。套接字不会收到来自 IE 的任何请求，因此从标头中删除 keep-alive 可能无济于事。
采纳答案by Brendan
Check what color mode your images are in.
检查您的图像处于哪种颜色模式。
I have accidentally switched the color mode of an image from RGB8 to CMYK in Photoshop, and ran into the same problem. IE8 would fail to display the image, while Firefox would have no trouble at all.
我不小心在 Photoshop 中将图像的颜色模式从 RGB8 切换到 CMYK，并遇到了同样的问题。IE8 将无法显示图像，而 Firefox 则完全没有问题。
回答by steve_c
I believe that in IE you need to set the source after the element is appended to the DOM, otherwise it won't render correctly.
我相信在 IE 中你需要在元素被附加到 DOM 之后设置源，否则它不会正确呈现。
回答by rob
It sounds like an issue with your server. A few things to try, to narrow down the problem:
听起来像是您的服务器的问题。尝试一些事情来缩小问题的范围：
See if it works statically. That is make a flat html page that includes these images. Do they show up?
看看它是否静态工作。那就是制作一个包含这些图像的平面 html 页面。他们出现了吗？
Try changing it so that your timer executes a single function that does a loop, rather than calling the timer in a loop.
尝试更改它，以便您的计时器执行执行循环的单个函数，而不是在循环中调用计时器。
Have it do a document.write (at page load, without any timers), simply writing the html for the elements (along with the urls so you can see what it is doing)
让它做一个 document.write（在页面加载时，没有任何计时器），只需为元素编写 html（连同 urls 这样你就可以看到它在做什么）
Have it do it, rather than with a timer, in response to clicking a button on the page. Have it do one image at a time.
让它这样做，而不是使用计时器，以响应单击页面上的按钮。让它一次做一张图片。
I think if you try all these things, you'll likely arrive at the problem, but if not, report back what happens.
我认为如果你尝试所有这些事情，你可能会发现问题，但如果没有，请报告发生的情况。
回答by elton
I have the same problem with images not displaying in IE8 but ok in other browsers. This is even the case with locally saved files. If i open with IE8 I get red x, but every other program displays ok. I looked at the properties of the image and they originated from Photoshop, so I'm guessing it's the CMYK issue as stated above. If I save this image using RGB project, the issue is resolved.
我有同样的问题，图像在 IE8 中不显示，但在其他浏览器中可以。本地保存的文件也是如此。如果我用 IE8 打开我得到红色 x，但其他所有程序都显示正常。我查看了图像的属性，它们起源于 Photoshop，所以我猜这是如上所述的 CMYK 问题。如果我使用 RGB 项目保存此图像，问题就解决了。
回答by Budric
Yeah, I still don't know what the problem is. People have been suggesting it's CMYK. If that solution works for you, that's great. I'm using libPNG for encoding and RGB at all times. CMYK was not the problem for me.
是的，我还是不知道是什么问题。人们一直在建议它是 CMYK。如果该解决方案适合您，那就太好了。我一直使用 libPNG 进行编码和 RGB。CMYK 对我来说不是问题。
I implemented HTTP server using Boost/asio http server sample #3. As well as Java Servlet. Same problems. Sometimes it works, sometimes it doesn't
我使用 Boost/asio http 服务器示例 #3 实现了 HTTP 服务器。以及Java Servlet。同样的问题。有时有效，有时无效
I give up.
我放弃。
