onerror循环卡死的根源是备用图也404导致无限重试，必须用this.onerror=null立即切断事件链，正确写法为onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"。
onerror 循环卡死的根源是什么
根本不是代码写错了，而是浏览器在第一次 onerror 中换的备用图（比如 fallback.jpg）本身也 404，触发第二次加载失败 → 再次进入 onerror → 再换图 → 无限循环。内存飙升、页面无响应、控制台静默卡住，都是这个原因。
必须切断事件链：this.onerror=null 是硬性要求
只写 this.src='fallback.svg' 不够，必须立刻解除绑定，否则浏览器不会自动停。正确写法只有一种顺序：
-
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"—— 分号不能少，this.onerror=null必须紧接在赋值之后 - 错误写法：
onerror="this.onerror=null; this.src='...'"（顺序颠倒，首次失败时事件已触发，null没来得及生效） - 更稳妥的内联写法：
onerror="if (!this.dataset.fallbacked) { this.dataset.fallbacked = '1'; this.src = '/assets/placeholder.svg'; }"，用dataset标记状态，双重保险
备用图路径不可信，90% 的“循环”其实源于 fallback 本身不可达
本地双击打开 HTML、相对路径解析错乱、CDN 路径未同步、服务端没配 fallback 响应——这些都会让备用图直接 404。解决方案不是“再加一层 onerror”，而是让 fallback 图彻底不依赖网络：
- 优先用内联
data:image/svg+xml;base64,...，例如：data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg== - 所有路径统一为绝对路径：
/img/placeholder.svg，而非./img/placeholder.svg或../assets/placeholder.svg - 开发阶段禁用双击打开 HTML，必须用 Live Server（如 VS Code 的 Ritwick Dey 插件），避免
file://协议拦截
动态插入的 img 怎么安全绑定 onerror
通过 document.createElement('img') 创建后才绑定 onerror，大概率来不及——DOM 插入瞬间就完成加载并失败，事件早已丢失。
- 创建后、插入前立即绑定：
const img = document.createElement('img'); img.onerror = () => { img.src = 'data:image/svg+xml;base64,...'; img.onerror = null; }; container.appendChild(img); - 或全局捕获（推荐）：
document.addEventListener('error', e => { if (e.target instanceof HTMLImageElement && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true);，true表示捕获阶段，能覆盖所有后续插入的
真正容易被忽略的是：onerror 对空 src、CORS 拦截、服务器返回 200 的兜底页完全不响应——它只管“发了请求但 HTTP 状态码非 2xx”。这类失败必须靠其他手段兜底，比如预加载默认图、用 img.naturalWidth === 0 主动检测、或服务端统一返回语义化占位响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
