0

尝试在 Firefox 上加载图像时，我看到了一些意外行为。在我的 Web 应用程序中，我构建了一个图表。当我将点悬停在图表上时，会呈现一个工具提示，并在该工具提示中显示一个图像（以及一些文本）。当我在 Firefox 上渲染它时，图像开始显示加载的内容，然后一旦完全加载，就会被损坏的页面图标替换。（见下面的 imgur gif）。

图像是从 Amazon S3 加载的，这可能是相关的。此外，此工具提示由 Recharts 库呈现，在纯 js 中，组件正在导入我的 React 应用程序。加载图像的行很简单：

<img src={image_url} width="336px" />

这发生在我当前安装的 FF（Windows 10）以及 MacOSX 全新的 Firefox 安装（没有附加组件）上。这不会发生在任何 chrome 安装（在 5 台以上的计算机上测试）或 microsoft edge 中。

我检查了加载图像的网络调用，只发现了这些差异（但你可能会在下面的 webapp 的实时链接中看到我缺少的东西）：

  • 在 chrome 中，Referrer Policy 是strict-origin-when-cross-origin，而在 FF 中它默认为no-referrer-when-downgrade（但是我在本地将 firefox 推荐策略值（通过 上的属性img）设置为strict-origin-when-cross-originand origin-when-cross-origin，没有发生任何变化）。
  • 这是 chromeAccept标头：image/avif,image/webp,image/apng,image/*,*/*;q=0.8 与 Firefox：image/webp,*/*
  • 最后，Accept-Language当en-US,en;q=0.9Firefox 有en-US,en;q=0.5.

这是显示我看到的行为的 webm + gif： https ://imgur.com/a/x66AWoc 这是发生这种情况的实时网站：http: //52.53.193.14:3000/viewcount/esl_csgo/ 2020-10 -11_09-11-21

4

1 回答 1

0

正如@Leandro在评论中指出的那样，问题在于图像大小。

您是否尝试将图像大小调整为更小一些？您正在为缩略图使用令人难以置信的尺寸，您应该使用 2 张图片。我仍然相信你有两个问题，1）大小 2）跨站点安全问题（通过服务器端的政治解决）

我不知道较大的图像会破裂，这确实让我感到惊讶。我预计这可能与过多的大图像使页面的允许内存过载有关。（但是，即使在第一次加载时也会发生这种情况）。

于 2021-02-09T21:40:23.450 回答