onerror卡死是因备用图404触发无限重试，正确写法需同时满足：可用fallback地址+this.onerror=null解绑+dataset防重复；推荐base64 svg占位图并确保路径绝对可达。
onerror 一写就卡死，基本是因为备用图也 404，触发无限重试——这不是 bug，是没切断事件链的必然结果。
为什么 onerror="this.src='fallback.jpg'" 会死循环
浏览器在加载 fallback.jpg 失败时，会再次触发同一个 onerror，形成递归调用。内存持续增长，页面无响应，DevTools 可能直接崩溃。这不是兼容性问题，而是逻辑闭环缺失。
- 备用图路径写错（比如
./img/missing.png在子目录下解析成 404） - 用了相对路径但 HTML 是双击打开的
file://协议，所有相对路径全部失效 - 备用图被 CDN 缓存了 404 响应，或 Nginx 没配 fallback 路由
- 没加
this.onerror=null，事件监听一直挂着
onerror 正确写法必须包含三要素
只写换图不行，必须同时满足：可访问的 fallback 地址 + 立即解绑事件 + 防重复标记（尤其动态插入时）。
-
onerror必须内联在标签里：<img src="a.webp" onerror="this.src='/assets/placeholder.svg'; this.onerror=null;" alt="图标"> - 备用图优先用 base64 SVG：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiPi...，彻底规避路径和跨域 - 动态创建的
img元素，onerror必须在appendChild()前赋值，否则首次错误已过去，事件永远捕获不到
动态图片统一降级要用 dataset 标记防重复
全局监听 error 事件适合 SPA 或大量异步图片，但必须靠 dataset 控制状态，否则多个 img 共享同一 fallback 逻辑仍可能互相干扰。
- 绑定方式：
document.addEventListener('error', e => { if (e.target instanceof HTMLImageElement && !e.target.dataset.fallbacked) { e.target.src = 'data:image/svg+xml;base64,...'; e.target.dataset.fallbacked = 'true'; } }); - 不能只依赖
this.onerror=null，因为全局监听不走这个路径；dataset是唯一可靠的去重依据 - 服务端渲染的首屏图，仍需保留内联
onerror，JS 还没执行时它就是唯一防线
真正难的不是写对那一行 onerror，而是让 fallback 图本身 100% 可达——base64 占位图、绝对路径、CDN 托管的 SVG、开发用 Live Server，缺一不可。路径错了，再严谨的逻辑也是空转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
