IE8 不显示图像（红色 x）...有时

Question

我对以下任何其他浏览器（Chrome、Firefox）上都不会发生的问题感到抓狂：

• IE8 缓存被清除，
• 浏览器启动时会打开 HTML/Javascript 页面，该页面会动态请求并创建一些图像。此 HTML 页面由 Tomcat 服务器 localhost:8084 提供。
• 大多数情况下，请求的 10 个图像中 IE 显示为 RED X。
• 开发人员图像报告 (F12) 将某些图像“文件大小”显示为正确的 # 字节，但图像仍然不显示，或者某些图像文件大小“未知字节” “并且图像不起作用。
• 有时 10 个图像中有 2-4 个显示出来，而其余的则失败！
• 有时，在疯狂点击刷新 10 亿次后，图像就会出现。
• 真正的问题是，当我在 HTTP 服务器中设置断点时，套接字甚至没有打开。 IE 在失败之前甚至没有尝试从服务器获取图像。
• 最后，如果我运行相同的代码但从谷歌地图之类的地方请求图像，它可以在 IE 中正常工作。

这是我的 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>

对于 HTTP 服务器，我使用 BOOST 示例 ASIO HTTP 服务器 链接 我修改了它，因此对于任何 URI 请求，它都会发送一个 png 文件（我尝试了各种文件以确保它不是不好的 PNG 编码）。 HTTP 标头的内容类型为：“image/png”。因此发送了正确的 mime 类型。

我很长时间以来一直在努力寻找解决方案。阅读各种帖子：

• 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 使用相同的代码没有问题。

有什么想法吗？ 谢谢。

编辑 我将 myHostName 添加到受信任的站点。我还将内部和互联网站点的安全设置降低到低水平。如果启用的话，我将尝试禁用服务器上的保活。然而，正如我提到的，我根本没有看到 IE 尝试获取图像。套接字不会收到来自 IE 的任何请求，因此从标头中删除 keep-alive 可能没有帮助。

Answer 1

检查您的图像采用的颜色模式。

我不小心在 Photoshop 中将图像的颜色模式从 RGB8 切换为 CMYK，并遇到了同样的问题。 IE8 会无法显示图像，而 Firefox 则完全没有问题。

Answer 2

我相信在 IE 中，您需要在将元素附加到 DOM 后设置源，否则它将无法正确渲染。

Answer 3

听起来像是你的服务器有问题。可以尝试一些方法来缩小问题范围：

看看它是否静态工作。即制作一个包含这些图像的平面 html 页面。他们出现了吗？

尝试更改它，以便您的计时器执行执行循环的单个函数，而不是在循环中调用计时器。

让它做一个 document.write （在页面加载时，没有任何计时器），只需编写元素的 html（以及 url，以便您可以看到它在做什么）

让它这样做，而不是使用计时器，单击页面上的按钮的响应。让它一次处理一张图像。

我认为如果您尝试所有这些方法，您可能会解决问题，但如果没有，请报告发生的情况。

Answer 4

我有同样的问题，图像在 IE8 中不显示，但在其他浏览器中正常。即使本地保存的文件也是如此。如果我用 IE8 打开，我会得到红色 x，但其他所有程序都显示正常。我查看了图像的属性，它们源自 Photoshop，所以我猜测这是如上所述的 CMYK 问题。如果我使用 RGB 项目保存此图像，问题就解决了。

Answer 5

是的，我还是不知道问题出在哪里。
人们一直建议它是 CMYK。如果该解决方案适合您，那就太好了。我始终使用 libPNG 进行编码和 RGB。 CMYK 对我来说不是问题。

我使用 Boost/asio http 服务器示例 #3 实现了 HTTP 服务器。以及 Java Servlet。同样的问题。有时它会起作用，有时它不会让

我放弃。