this.onerror=null是硬性要求，因图片加载失败触发onerror后，若fallback图也404，会再次触发同一事件导致递归调用栈爆炸，这是html规范定义的行为，必须原子性清除监听。
onerror 无限循环的唯一可靠终止方式是：在赋值 fallback 路径的同时，立刻执行 this.onerror = null。 其他写法——比如只改 src、用函数封装但没清事件、或依赖外部状态标记——在 Safari、旧 Edge 或动态插入场景下大概率失效。
为什么 this.onerror=null 是硬性要求，不是可选项
浏览器在图片加载失败时触发 onerror，若新 src 也 404，会再次触发同一事件，形成调用栈爆炸。这不是 JS 逻辑错误，而是 HTML 规范定义的行为：每次 src 加载失败都重走事件流程。
常见错误写法：
-
onerror="this.src='fallback.png'"→ 备用图 404 就死循环 -
onerror="handleError(this)"，而handleError里只写了el.src = '...'，没写el.onerror = null - 用
addEventListener('error', ...)绑定，但没在回调里手动移除监听器
正确写法必须是原子操作：
@@##@@
动态创建的 <img src="icon.webp" onerror="this.src='/assets/placeholder.svg'; this.onerror=null;" alt="Icon"> 怎么安全绑定 onerror
直接拼字符串写 onerror=... 在模板渲染或 JS 拼接中极易出错，且无法保证 this.onerror=null 执行时机。更稳的方式是创建后立即用 addEventListener 并在回调内清除自身。
- 必须在
appendChild()之前完成绑定，否则首次错误已发生，事件直接丢失 - 不能复用同一个 handler 函数处理多个元素，否则
this.onerror = null会误清其他元素的监听器 - 推荐为每个元素单独绑定，或用闭包捕获目标元素：
const img = document.createElement('img');<br>img.src = 'user-123.jpg';<br>img.addEventListener('error', function handler() {<br> this.src = 'data:image/svg+xml;base64,PHN2Zy...';<br> this.removeEventListener('error', handler);<br>});<br>container.appendChild(img);
备用图路径本身不可靠，是循环的真正源头
90% 的循环问题，根源不是代码写法，而是 fallback 图片地址也返回 404。尤其注意以下几类“看似能用实则高危”的路径：
- 相对路径如
./missing.png：本地双击打开 HTML 时，file://协议下解析成系统根目录 - 带查询参数的 URL：
logo.jpg?format=webp→ 旧浏览器发请求，后端可能返回 406 或空响应 - CDN 资源未同步，或路径大小写不一致（Linux 服务器区分大小写）
最稳妥方案是用内联 base64 SVG 占位图，彻底绕过网络请求：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"
框架项目里容易被忽略的隐藏循环点
Vue/React 中用 v-bind:src 或 src={url} 渲染图片时，onerror 内联写法依然有效，但要注意两个陷阱：
- 数据更新后重新渲染，
onerror属性会被框架重写，导致this.onerror=null失效（因为 DOM 元素被替换） - SSR 渲染时，服务端不执行 JS，
onerror不起作用；首屏就挂了的图，用户看到的是空白或 alt 文本
此时应改用全局事件监听 + 标记机制：
document.addEventListener('error', e => {<br> if (e.target.tagName === 'IMG' && !e.target.hasAttribute('data-fallbacked')) {<br> e.target.src = 'data:image/svg+xml;base64,...';<br> e.target.setAttribute('data-fallbacked', 'true');<br> }<br true><p>注意这里用了捕获阶段（第三个参数 <code>true</code>），因为 <code>error</code> 事件不冒泡，只有捕获能拿到。</p>
<p>真正难处理的不是怎么写 <code>onerror</code>，而是如何确保 fallback 资源从构建、部署到 CDN 缓存全链路可用。一个 404 的占位图，比没有降级还糟——它让错误从“看不见”变成“无限卡死”。</p>
<img>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
