如果找不到图像则回退

Posted 2023-03-28

【中文标题】如果找不到图像则回退

【英文标题】：Fallback if image not found

【发布时间】：2022-01-12 11:31:12

【问题描述】：

如果在 SVG <image> 元素上指定的文件未找到，则结果是不可预测的。在 Firefox 中，我没有得到任何指示，也没有错误。在 Chrome 中，我得到了一些默认的箱形风景图像。

有没有办法提供替代图像，例如漂亮的错误标记？我已经看到了 html 中涉及属性的类似问题的解决方案：

onerror="this.onerror=null; this.src='Default.jpg'"

但这在我的 SVG 中不起作用（即使在将 src 更改为 href 之后）。我还看到了一个作弊，其中使用额外的src 属性为正常的href 提供了一个回退（参见SVG Fallbacks），但它似乎依赖于浏览器中实现的一个怪癖并且不再起作用（至少不在 Firefox 中）。

我正在寻找一种至少适用于 Firefox、Chrome 和 Edge 的方法。

【问题讨论】：

非常感谢，像往常一样，罗伯特。这甚至适用于 IE11。你想把它变成一个答案以便我接受吗？

【参考方案1】：

你想要

this.href.baseVal='Default.jpg'

由于 SVG 对 SMIL 的支持

【讨论】：

这种方法唯一的缺点是我需要将 onerror 添加到每个图像元素（我有很多）。我找不到动态添加这些的方法，因为加载事件对于错误检测来说太晚了。