onerror导致卡死是因备用图404时反复触发错误事件形成死循环，必须在赋值后立即置空onerror；推荐用base64 SVG占位图彻底规避路径与跨域问题。
onerror="this.src='fallback.jpg'"为什么卡死？
这不是写法错，是逻辑断层：备用图 fallback.jpg 一旦也 404，浏览器会再次触发 onerror，新赋值又失败 → 再触发 → 再赋值……内存暴涨、DevTools 崩溃都真实发生过。关键不是“换图”，而是“换完就停”。
必须加 this.onerror=null 的三种写法
防死循环的硬性动作，缺一不可：
-
onerror="this.src='/img/placeholder.svg'; this.onerror=null;"—— 最简，适合静态 HTML，分号不能省 -
onerror="if (!this.src.includes('fallback')) { this.src='/img/fallback.png'; this.onerror=null; }"—— 加路径判别，避免误触已降级的元素 - 动态插入时改用
addEventListener('error', handler)，并在 handler 里第一行写e.target.onerror = null，比内联更可控
为什么 base64 SVG 占位图最稳妥？
90% 的“降级失败”其实不是图片丢了，而是路径解析错（如 file:// 协议下 ./img/x.png 被当成本地磁盘根目录）或跨域拦截。用内联 data URL 彻底绕过这些：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"
立即学习“前端免费学习笔记（深入）”；
这个字符串生成一个纯白 30×30 SVG，无网络、无路径、无跨域，只要 HTML 能打开，它就一定显示。
动态创建的 <img alt="HTML编写onerror导致死循环怎么改？规避死循环实操指南" > 怎么绑定才不丢事件？
常见错误：先 appendChild(img)，再绑 onerror。但图片可能在 DOM 插入瞬间就触发了加载失败，事件直接丢失。
正确顺序只有这一种：
- 创建
img元素 - 立即设置
img.onerror = function(e) { e.target.src = '...'; e.target.onerror = null; }; - 再调用
appendChild()
如果用框架（如 React/Vue），注意不要依赖 v-if 或 ngIf 控制显隐——它们可能销毁并重建 DOM，导致 onerror 绑定失效；优先用 display: none 配合 src 切换。
src、服务端返回 200 的兜底页（比如 Nginx 返回 404 页面但状态码是 200）。它只对“请求发出后网络层失败”有效。所以 fallback 图必须是零依赖的 base64，或者绝对路径且服务端确保该路径永远返回 200 + 正确 MIME。 
