onerror触发后图片无限重试是因为备用路径加载失败再次触发onerror，形成死循环；解决方法是设置this.onerror=null后再赋值this.src，或用addEventListener配合{once:true}确保仅执行一次。
onerror 触发后为什么图片会无限重试
因为 onerror 回调里如果只是简单设置 this.src 指向另一个路径，而那个备用路径又加载失败，就会再次触发 onerror，形成死循环。浏览器不会自动阻止重复调用，尤其当备用图也不存在时，onerror 会反复执行，甚至卡住主线程。
如何用单次 fallback 避免循环
核心是「只尝试一次备用路径」，并在触发后立刻移除监听，防止二次触发。常见写法是把 onerror 设为匿名函数，并在内部清空自身：
<img src="wrong.jpg" onerror="this.onerror=null; this.src='fallback.png';" alt="HTML怎么解决图片路径错误引发的onerror循环" >
关键点：
-
this.onerror=null必须写在赋值this.src前，否则若fallback.png也 404，仍会再进一次onerror - 不要用箭头函数或外部函数直接赋值，比如
onerror="handleError()"，除非你在handleError内手动置空onerror - 如果用 JS 绑定，推荐用
addEventListener并配合{ once: true }：
img.addEventListener('error', () => {
img.src = 'fallback.png';
}, { once: true });
服务端路径错误比前端更难排查
很多情况下 onerror 循环不是代码问题，而是路径本身拼错，比如：
立即学习“前端免费学习笔记（深入）”；
- 相对路径写成
./images/xxx.jpg，但当前 HTML 在子目录，实际应为../images/xxx.jpg - 构建工具（如 Webpack/Vite）把图片哈希化了，但 HTML 中硬编码的是原始文件名
- CDN 或代理配置导致
/static/被重写，但onerror里的 fallback 路径没同步更新
建议：打开浏览器开发者工具的 Network 面板，过滤 Img，看具体哪个请求返回 404，再对照 src 和 onerror 里的路径逐段验证。
更健壮的 fallback 方案：降级到纯文本或占位符
如果连 fallback 图都不可靠，可以彻底放弃图片，改用语义化降级：
<img src="avatar.jpg"
onerror="this.onerror=null; this.src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect width="100%" height="100%" fill="%23eee"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="16" fill="%23999">?</text></svg>';"
alt="用户头像">
这种内联 SVG 占位符不发网络请求，绝对可靠；alt 文本也能被读屏器识别。不过注意 URL 编码中的空格、引号和斜杠必须转义，否则 onerror 会语法报错。
真正麻烦的不是写几行 fallback 代码，而是当 onerror 静默失效（比如 fallback 图被缓存但内容损坏），或者多个图片共享同一段内联 onerror 逻辑却没做隔离——这时候循环不会立刻暴露，而是在某些缓存策略或部署环境下偶然触发。
