onerror="this.src='fallback.png'"会卡死是因为备用图再次失败导致无限循环，必须写成onerror="this.src='fallback.png'; this.onerror=null;"并确保路径绝对或base64可达。
onerror="this.src='fallback.png'"为什么会卡死
这是最典型的死循环触发场景：当备用图 fallback.png 本身也加载失败（比如路径错、服务器宕、CORS 阻断），onerror 会再次触发，而你没切断它，于是重复执行赋值 → 再失败 → 再触发 → ……浏览器主线程被拖住，内存飙升，页面无响应。
根本原因不是代码写错了，而是事件绑定没清理。只要 onerror 属性还在，每次失败都会回调一次，不管 src 换了多少次。
必须立即执行 this.onerror = null
防死循环只有一种可靠写法，顺序和写法都不能错：
-
onerror="this.src='fallback.png'; this.onerror=null;"—— 分号不能少，this.onerror=null必须紧接在赋值之后 - 不能写成
onerror="handleError(this)"然后在函数里设null，因为函数调用本身不保证 this 绑定正确，尤其在动态插入或模板渲染中容易失效 - 不能省略
this.直接写onerror=null，那只是声明了一个局部变量，对当前元素无效 - 如果 fallback 图也要降级（比如再 fallback 到 base64 占位图），必须在同一个内联语句里链式处理：
onerror="this.src='data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271%27%20height=%271%27%3E%3Crect%20width=%271%27%20height=%271%27%20fill=%27%23eee%27/%3E%3C/svg%3E'; this.onerror=null;"
动态创建的 <img> 怎么安全绑定 error 事件
内联 onerror 只适用于静态 HTML。JS 动态插入图片时，得用 addEventListener，但要注意时机和清理：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须在设置
src之前 绑定error事件，否则可能错过首次失败 - 事件处理器里不能直接改
this.src，要先清空再赋新值：img.src = ''; img.src = fallbackUrl;，否则浏览器可能从缓存读 404 响应，不发新请求 - 成功替换后，必须手动移除监听器：
img.removeEventListener('error', handler)，否则后续 DOM 复用或重绘可能引发意外触发 - 避免用匿名函数绑定：
img.addEventListener('error', () => { ... })，这样无法 remove，只能靠标记 + 条件判断跳过重复执行
全局监听 window.error 为什么不适合图片 fallback
window.addEventListener('error') 能捕获所有资源错误，但它无法区分是哪个 <img> 出问题，更没法精准替换它的 src：
- 事件对象
e.target在跨域图片中可能是null或不完整，无法安全取到原元素 - 即使能取到，也得遍历 DOM 查找匹配的
src，性能差且易误判（多个同名资源） - 它不阻止默认行为，也不能干预图片加载流程，只能做日志或兜底提示，不能真正实现“换图”
- 唯一适合它的场景是脚本加载失败：
e.target.tagName === 'SCRIPT'且!(e instanceof ErrorEvent)，这时可定位并重试
真正难的不是写对那一行 this.onerror=null，而是意识到：所有 fallback 都必须建立在“单次失败、单次响应、单次终止”的契约上。一旦引入异步、复用、共享状态或间接引用，循环风险就藏在你看不见的地方。
