Firefox 不显示缓存中的图像，仅显示替代文本答案

【问题标题】：Firefox doesn't show image from cache only alt textFirefox 不显示缓存中的图像，仅显示替代文本
【发布时间】：2017-09-21 11:13:51
【问题描述】：

观察

有一个从 https 提供的包含广告位的单页应用程序网页。这些广告位由一些出价逻辑填充，广告由 JavaScript 编写在 IFRAME 文档中。

首次加载显示广告图片，例如https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLu47R8QEQARgBMggW4D7gy4qb5g

当用户在页面上操作时，会发生新的广告竞价并重新加载广告位。在我们的例子中：呈现具有相同 src 属性的 img 元素。

所有其他浏览器（Chrome、IE、Safari）都显示此图像，取自本地缓存。

并非如此：Firefox（Windows、Mac；版本 52）的行为如下：

在白色背景上显示alt 文本
图像未显示：它消失了，尽管它是具有相同 URL 的完全相同的图像
在使用开发者工具时，img 上的工具提示说“加载图像时出错”（我只知道德语消息）
网络选项卡未显示此图像上的任何活动（也没有 304 或“来自缓存”）

其他信息：

没有激活/更改的 CSS 可以隐藏图像（实际上在这个 img 周围根本没有 CSS）。
无需额外的 JavaScript（例如延迟加载）
没有广告拦截器
所有资源都从https加载
控制台没有记录错误
页面首次加载显示图片
所有其他浏览器都没有问题，从来没有。

示例

在以下页面你可以看到错误（我想这是一个 FireFox 错误）：

http://bartelt.team.netzathleten-media.de/2017-03-30_MD-230-refresh-bug/

5 秒后广告消失（仅在 FireFox 中）。

问题

您能否给我一些建议，这可能是什么原因造成的？

有没有办法以某种方式调试由外部代码（来自广告服务器）动态创建的图像onerror？

这真的很奇怪，非常感谢您的帮助。

【问题讨论】：

我们能否得到一些代码来使用，例如 html 布局。谢谢
有趣的是，当我在第二个 console.info('refresh') （在 setTimeout 中）中放置一个断点时，如果我在前进之前稍等片刻，它会短暂闪烁图像或仅显示文本。因此，尽管似乎是刷新导致了它，但它似乎是独立发生的。
我很好奇你是否解决了这个问题。
@klvs 非常感谢您的帮助！它尚未解决，但有人找到了解决方法。将图像放入额外的iframe 时，问题不再存在。自签名证书的问题仅在测试站点。我们在生产中获得了有效的证书，但设置要复杂得多。

标签： html image debugging firefox

【解决方案1】：

非常有趣的问题。一定要把你的头发拉出来。用缩小的代码给出解决方案非常困难，但我可以告诉你我观察到的情况，也许它会有所帮助。

观察 1：

我也在其他一些浏览器中尝试过。 safari 9.1.1（注意：10.1 中没有问题）似乎也失败了，但给出了更有意义的错误消息。这似乎是 CORS 以及不同浏览器如何缓存的问题。在 chrome 中，图像似乎在 Firefox 和 safari 中没有被缓存。当代码轮询（从广告内）时，它试图从http://tpc.googlesyndication.com 加载内容，这些“问题浏览器”说这违反了 CORS。为什么它会首先加载？没有源代码很难说。

我很想看看如果在 5 秒后加载不同的广告会发生什么。

无论如何，这是来自 safari 的错误：

Blocked a frame with origin "http://bartelt.team.netzathleten-media.de" from accessing a frame with origin "http://tpc.googlesyndication.com". Protocols, domains, and ports must match. dc — mtrcs_533746.js:50:368 (anonymous function) — mtrcs_533746.js:23:281 q — mtrcs_533746.js:85:503 sd — mtrcs_533746.js:23:233 wd — mtrcs_533746.js:24 nb — mtrcs_533746.js:26:154 (anonymous function) — mtrcs_533746.js:26:214 U — mtrcs_533746.js:22 (anonymous function) — mtrcs_533746.js:22:103 (anonymous function) — mtrcs_533746.js:84:424

观察 2：

你说通过 ssl 加载。无论如何，不在 safari 9.1 中。见上面的错误。 Your ssl certificate is all sorts of bad 我会先解决这个问题。好像是自签的？不管怎样，看看here，看起来这会让你陷入CORS地狱。

祝你好运，我希望这会有所帮助。 CORS 和 SSL 真的很难处理。尤其是现代浏览器对不使用 https 和/或混合内容越来越严格。

【讨论】：

【解决方案2】：

这可能与 content:url("image") 在 Firefox 中不起作用有关...

Content url does not display image on firefox browser

【讨论】：