onerror反复触发致卡死主因是未清除事件绑定：fallback图片404时会无限循环触发；须设this.onerror=null或用{once:true}；框架v-html中onerror无效，应改用全局监听+data属性；picture的source不支持onerror，仅img生效。
onerror 触发后为什么图片反复换源卡死
最常见原因是没切断事件绑定：写成 onerror="this.src='fallback.png'" 时，如果 fallback.png 也 404，onerror 会再次触发，形成无限循环。浏览器可能卡顿、内存暴涨，甚至崩溃。
必须在赋新 src 后立刻清空事件处理器：
-
onerror="this.src='fallback.png'; this.onerror=null"—— 静态 HTML 最简方案 - 动态创建时用
addEventListener('error', handler, { once: true })，天然防重复 - 若 fallback 图路径不可靠（比如带查询参数、CDN 域名失效），循环风险极高，应提前验证其可访问性
框架中 v-html / dangerouslySetInnerHTML 里 img 的 onerror 失效
Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 插入的 HTML 字符串，其中的 onerror 属性**不会被框架接管，也不会自动绑定事件监听器**。它只是静态字符串，渲染后浏览器原生解析，但一旦组件重渲染（比如响应式数据变更），整个 DOM 被重建，onerror 回调函数引用丢失，且无法复用。
更危险的是：框架内联的 onerror 函数体（如 onerror="handleFallback()"）中的 handleFallback 在组件作用域外不可见，直接报 ReferenceError。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是统一用全局事件监听 + data 属性标记：
<img src="x.jpg" data-fallback-key="user-avatar" alt="HTML前端框架渲染onerror循环如何避免" > - 在 mounted / useEffect 中绑定
document.addEventListener('error', ...)，检查e.target.dataset.fallbackKey - 避免在字符串模板里写 JS 函数调用，那不是“执行”，而是“拼字符串”
使用 picture + source 时 onerror 不触发怎么办
<picture></picture> 里的 <source></source> 标签**不支持 onerror 属性**，它的加载失败完全静默——浏览器只按 type 和 media 匹配，匹配失败就跳过，不会抛事件。只有最终兜底的 <img alt="HTML前端框架渲染onerror循环如何避免" > 元素才响应 onerror。
所以你给 <source></source> 写 onerror 是无效的，而且容易误以为“已加 fallback”。
- 所有降级逻辑必须落在
<picture><source>...<img src="fallback.jpg" alt="HTML前端框架渲染onerror循环如何避免" ></source></picture>的<img alt="HTML前端框架渲染onerror循环如何避免" >上 -
<img src alt="HTML前端框架渲染onerror循环如何避免" >必须指向一个真实可访问的 JPEG/PNG 地址，不能是带?format=webp这类后端协商路径 - 不要依赖
<source></source>加载失败来触发逻辑——它根本不发 error 事件
动态插入图片后 onerror 绑定失败的典型场景
用 innerHTML += '<img src="x.jpg" onerror="..." alt="HTML前端框架渲染onerror循环如何避免" >' 或 el.insertAdjacentHTML() 插入的标签，其中的 onerror **不会自动绑定到当前 JS 作用域的函数**。因为内联事件处理器在执行时，this 指向元素本身，但函数名（如 retry()）需在全局作用域可访问；而现代框架默认不挂全局函数。
更隐蔽的问题是：DOM 插入和 JS 执行不同步，onerror 可能在函数定义前就触发了。
- 推荐改用
document.createElement('img')+addEventListener('error', handler) - handler 中通过闭包捕获所需上下文（如 URL、重试次数），不依赖全局变量或函数名
- 若必须用字符串插入，确保回调函数已声明在
内联脚本中，且未用const/let（兼容 IE）
