在 img.src 更改后强制 firefox 重新加载图像

Posted 2023-03-05

【中文标题】在 img.src 更改后强制 firefox 重新加载图像

【英文标题】：Force firefox to reload image after img.src change

【发布时间】：2012-08-02 08:15:31

【问题描述】：

我正在修改画布上的一些图像，然后将这些图像的 src 设置为新的 base64 编码图片。

img.src = changeColor(img);

changeColor 返回 base64 编码图像：

return canvas.toDataURL();

Chrome 和 Opera 会在 src 更改后刷新图像，但 firefox 不会！ 我还通过 FireBug 检查了图像元素，它显示了新的 src 和新的图像！

我已经尝试将数据添加到 URL，但是呃……这是一个 base64 编码的图像，而不是一个 url，所以它完全破坏了我的图片。

我有什么方法可以通过 javascript 强制重新加载图像或禁用 firefox 缓存？

更新： 我也尝试设置 image.src='';在 changeColor 函数中。 它在 chrome 中工作，但在 firefox 中......图片消失，并且在我设置新的 base64 值时不再出现。

【问题讨论】：

如果没有看到相关代码来理解选项，真的帮不上忙。

如果是base64编码的图片，则不会是缓存问题，因为如果图片发生变化，base64数据也会发生变化。还是我错过了什么？也许您可以尝试再次删除和添加图像 dom 元素。 （或将 src 设置为“”，然后设置为您的实际数据，不知道这是否有帮助，但值得一试）

Firefox won't change image source的可能重复

【参考方案1】：

我没有使用图像数据，但这适用于在 src 变量未更改时 FF 未重新加载的类似问题：

image.src = "";
setTimeout(function()
    image.src = //the new image src
, 0);

【参考方案2】：

正如@dmmd 提到的，它对我有用。您只需要添加具有随机值的查询字符串。

id.src = "path?t=t"+ Math.random(5);

【参考方案3】：

尝试添加图像格式（并使用 jpg）。它可能会重新编码图像：

return canvas.toDataURL('image/jpg');

【讨论】：

它在大多数浏览器上都能正常工作，但在 Firefox 中却不行。

尝试添加一个“？” （查询字符串符号）在您的 src 末尾。不确定在这种情况下是否有帮助，但我记得当我遇到与 FF 类似的问题时，它曾救过我一次。

我试过了……“？”破坏图像数据。这是因为 src 是图像数据，而不是标准 URL。