根本原因是备用图URL不可访问导致二次onerror触发，且未执行this.onerror=null切断事件；必须用绝对路径/base64确保fallback可达，并紧随赋值后立即置空事件处理器。
onerror无限循环的根源是什么
根本原因就一个：this.src 被赋值为一个不可访问的 URL，导致浏览器再次触发 onerror，而你没切断它。不是代码写错了，是备用图本身 404 了——这时候浏览器不会报错，但内存会涨、页面可能卡死，甚至标签页无响应。
常见错误写法：onerror="this.src='default.png'"。缺了 this.onerror=null，等于给死循环开了门。
必须同时满足两个条件才安全：
- 新 src 是绝对路径、base64 或已验证可加载的 CDN 地址
- this.onerror=null 紧跟在赋值语句后，且用分号隔开
最简可靠的内联写法
不用 JS 函数、不依赖框架、兼容 IE9+，一行搞定：
<img src="user/123.jpg" onerror="this.src='/assets/avatar-fallback.svg'; this.onerror=null;" alt="用户头像">
要点：
- /assets/avatar-fallback.svg 必须是服务器上真实存在的路径（推荐 SVG，体积小、抗缩放）
- 斜杠开头的绝对路径能避开路由嵌套导致的相对路径解析错误
- this.onerror=null 不能写成 this.onerror = null（空格无关，但分号不能少）
- alt 文本要语义化，不能只写“默认图”
动态图片或批量处理时怎么防循环
如果图片是 JS 动态插入的（比如列表渲染、懒加载），内联 onerror 会失效——DOM 还没挂载，事件绑不上。这时得用全局监听：
立即学习“前端免费学习笔记（深入）”；
用 window.addEventListener('error', ...) 捕获所有图片加载失败，但必须过滤出 <img alt="HTML如何用默认图避免onerror循环" > 元素，并限制只处理一次：
window.addEventListener('error', (e) => {
if (e.target instanceof HTMLImageElement && !e.target.dataset.handled) {
e.target.dataset.handled = 'true';
e.target.src = '/assets/placeholder.svg';
}
});注意：
- dataset.handled 是比 this.onerror=null 更鲁棒的标记方式，避免因 DOM 重建丢失绑定
- 不要用 e.target.onerror = null，某些旧版 Safari 下不生效
- 避免在监听器里调用未预加载的 fallback 图，否则首次 fallback 可能白屏
为什么 base64 默认图更稳
当网络抖动、CDN 故障或跨域策略收紧时，HTTP 请求类 fallback 容易二次失败。用 data URL 就绕过这些：
<img src="broken.jpg" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjZGRkIi8+PC9zdmc+'; this.onerror=null;" alt="占位图">
好处：
- 无需额外请求，100% 可达（只要 HTML 能加载）
- SVG base64 体积通常小于 2KB，不影响首屏
- 不受 CSP img-src 限制（除非明确禁止 data:）
- 缺点：无法缓存，每次重绘都解码——但对默认图这种低频场景影响极小
真正容易被忽略的是 fallback 图自身的可靠性。再漂亮的 onerror 逻辑，也救不了一个 404 的 default.png。上线前务必用 curl 或 DevTools Network 面板验证那张图是否真能返回 200。
