Angular中img标签onerror事件触发时机及webp等不兼容格式触发问题

核心结论 #

当浏览器不支持img标签加载的图片格式时，会触发onerror事件

具体触发逻辑说明 #

• img标签的onerror事件会在所有导致图片无法正常完成加载、解码、渲染的错误场景下触发，包含的常见场景有：资源链接返回4xx/5xx状态码、资源跨域未配置合法CORS规则、图片文件本身损坏无法解码、图片格式不在当前浏览器的支持解码列表中。
• 你提到的「浏览器不支持webp格式时加载webp图片」的场景完全符合上述触发条件：浏览器拿到webp资源后识别到无法解码该格式，会直接判定为加载失败，触发onerror事件。

实际应用示例 #

业内常用的单标签webp兼容降级方案就是基于该特性实现的，代码示例如下：

<!-- 浏览器不支持webp时触发onerror，自动替换为jpg格式的兜底图片 -->
<img src="example.webp" onerror="this.src='example.jpg'" alt="内容图">

特殊情况说明：如果是使用标签搭配多个指定不同格式的图片源，浏览器会自动遍历所有，优先选择第一个自身支持的格式加载，此时只要存在任意一个可支持的资源，就不会触发img的onerror事件，仅当所有的资源全部加载/解码失败时才会触发。

内容的提问来源于stack exchange，提问作者Pravesh Shetty