最典型的死循环场景是onerror中重设无效src导致无限递归；应优先使用picture/object原生降级，若用onerror则首行解绑事件并置空src或设透明占位图。
onerror 触发后 src 被重设为无效地址，导致二次 onerror
这是最典型的死循环场景：onerror 里把 src 改成另一个可能也不存在的图片路径（比如备用图路径写错、CDN 域名失效），浏览器立刻尝试加载新地址，失败后再次触发 onerror，无限递归。
关键不是“怎么加 onerror”，而是“怎么确保它只执行一次且不引发重试”。实用做法是：
- 在
onerror回调里，先清空或置空src，比如this.src = ''或this.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='（1×1 透明 GIF） - 或者用一个标记位（如
data-loaded="failed"）记录状态，回调开头先检查是否已处理过：if (this.dataset.loaded === 'failed') return; - 避免在
onerror中设置新的网络地址——哪怕你认为“备用图肯定有”，也要考虑 CDN 故障、路径拼写错误、权限限制等现实情况
Vue/React 等框架中直接写 onerror 容易忽略 this 指向和响应式问题
在 Vue 模板里写 @error="handleImgError" 是安全的，但若手写 onerror="handleError()"，函数内 this 指向是 window，拿不到组件实例；React 中更常见的是事件绑定后忘记清除或重复绑定。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
- Vue：用
@error+ 方法内加v-if="!imgFailed"控制渲染，或在方法里直接this.imgFailed = true并更新src为本地 fallback - React：用
useRef拿到 img 元素，在useEffect中手动添加onerror，并在触发时调用current.onerror = null切断后续调用 - 通用原则：事件处理函数里第一行就解除自身绑定，例如
this.onerror = null; this.src = fallbackSrc;
用 loading=lazy + onerror 组合时，首次加载失败后 lazy 不再触发
loading="lazy" 图片在进入视口前不会发起请求，但如果它第一次加载就失败并触发 onerror，而你在回调里又设置了新 src，这个新地址**不会自动触发 lazy 加载逻辑**——浏览器把它当普通赋值处理，立即发起请求，不管是否在视口内。
这会导致两个问题：非视口内图片意外发出请求；如果新 src 也失败，onerror 再次触发，又回到死循环起点。
- 稳妥做法：禁用 lazy（
loading="eager"）或不用 lazy，尤其对关键 fallback 图 - 若必须用 lazy，
onerror中不要改src，改用background-image或插入<div> 占位，并加 class 显示 fallback 文案/图标 <li>注意：Safari 对 <code>loading=lazy的onerror支持不稳定，某些版本会跳过触发
真正可靠的 fallback 方案其实是 object 标签或 picture + source
靠 JS 的 onerror 补救，本质是“出错了再想办法”，而 <picture></picture> 和 <object></object> 是 HTML 原生支持的降级机制，无 JS 依赖、无执行时机风险、无死循环可能。
示例：
<picture> <source srcset="photo.webp" type="image/webp"> <source srcset="photo.avif" type="image/avif"> <img src="photo.jpg" alt="描述" onerror="this.src='fallback.png'; this.onerror=null;"> </picture>
这里 <img alt="HTML加入图片onerror死循环怎么搞？跳出死循环实用操作" > 的 onerror 只作为最后一道防线，且加了 this.onerror=null 防止重入。但更干净的做法是：
- 把 fallback 图放在
<source></source>最后一项（用media="(min-width: 0)"强制匹配） - 或用
<object data="main.jpg"><img src="fallback.jpg" alt="HTML加入图片onerror死循环怎么搞？跳出死循环实用操作" ></object>，object 加载失败时自动展示内部 img
死循环从来不是技术上限问题，而是把容错逻辑塞进单点事件里造成的耦合。跳出它的最好方式，是别让它有机会开始。
