img 的 onerror 常因 fallback 图片二次失败导致死循环，且构建工具哈希路径使内联字符串失效；可靠做法是 onerror 中设 this.onerror = null 后切换父容器 class，由 css 伪元素兜底显示。
img 元素的 onerror 事件为什么常失效？
直接在 <img> 上写 onerror="this.src='fallback.jpg'" 看似简单，但容易陷入死循环：如果 fallback.jpg 也加载失败，会再次触发 onerror，最终报错或卡住。更隐蔽的问题是，现代构建工具（如 Webpack/Vite）可能对静态资源路径做哈希处理，而内联 JS 里的字符串路径无法被自动解析，导致 fallback 路径 404。
真正可靠的做法是把 fallback 逻辑抽离，并阻止重复触发：
- 用
onerror第一时间移除该监听器，避免循环：this.onerror = null; this.src = '/images/placeholder.svg'; - 优先使用矢量占位图（如
placeholder.svg），体积小、缩放无损、可内联 base64 - 确保 fallback 资源部署路径稳定，不依赖构建时的 hash 变更
用 ::before 或 ::after 伪元素实现纯 CSS 占位
伪元素本身不能“感知”图片是否加载失败，所以它不能替代 onerror 的检测能力，但它非常适合做视觉兜底——前提是图片容器结构可控。核心思路是：让 <img> 容器（比如一个 <div class="img-wrap">）承担尺寸和背景职责，图片仅负责内容层叠。<p>示例结构与样式：</p>
<pre class="brush:php;toolbar:false;"><div class="img-wrap">
@@##@@
</div></pre>
<pre class="brush:php;toolbar:false;">.img-wrap {
position: relative;
width: 300px;
height: 200px;
background-color: #f5f5f5;
}
.img-wrap::before {
content: "⚠";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 24px;
}
.img-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.img-wrap img:not([src])::before,
.img-wrap img[src=""]::before,
.img-wrap img.error::before {
/* 这些选择器无法生效 —— 伪元素不能加在 img 上用于覆盖失败状态 */
}</pre>
<p>注意：<code>img::before 在绝大多数浏览器中无效（<img src="real.jpg" alt="描述"> 是替换元素，不支持伪元素内容注入），所以上面最后一行是常见误解。真正能用伪元素兜底的，只能是 <img> 的父容器。
结合 onerror 切换 class，再由 CSS 控制伪元素显隐
这是目前最稳妥、兼容性好且无需额外请求 fallback 图片的方案：JS 只负责标记失败状态，CSS 负责呈现。关键在于用 class 触发伪元素显示，而非试图操作 img 自身。
- HTML 中给容器加初始 class：
<div class="img-wrap img-loading"><img></div> - 图片加载失败时，移除
img-loading并添加img-error：this.parentNode.classList.replace('img-loading', 'img-error'); - CSS 中定义
.img-wrap.img-error::before显示占位内容，同时隐藏原图（可选）
完整片段：
<div class="img-wrap img-loading"> @@##@@ </div>
.img-wrap {
position: relative;
width: 300px;
height: 200px;
}
.img-wrap.img-error::before {
content: "?️ 图片加载失败";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fafafa;
color: #777;
font-size: 14px;
line-height: 1.4;
}
这里 this.remove() 是关键：移除 <img ...> 元素本身，避免其空 src 或 broken icon 干扰布局或可访问性。
现代替代方案：loading="lazy" 和 decoding="async" 对失败处理的影响
这些属性本身不改变加载失败行为，但会影响失败时机和调试难度。例如：
-
loading="lazy"可能让图片在进入视口前就触发onerror，也可能因滚动过快导致事件未及时绑定 -
decoding="async"不影响加载，但若图片解码失败（极少见），不会触发onerror，而是静默渲染为空白 - Service Worker 拦截图片请求时，
onerror仍会触发，但错误信息统一为Network Error，无法区分是 404 还是 CORS
所以，不要依赖加载属性来简化错误处理逻辑；它们只是优化手段，不是容错机制。
最易被忽略的一点：当图片通过 CSS background-image 加载时，onerror 完全不可用，必须改用 JS + Image() 实例的 onload/onerror 手动探测，再切换类名——这和 <img src="broken.jpg" onerror="this.parentNode.classList.replace('img-loading', 'img-error'); this.remove();" alt="产品图"> 的方案本质一致，只是触发点不同。
