onerror无限循环的根源是fallback路径也404，必须写成this.src='fallback'; this.onerror=null;并用绝对路径或base64确保可达。
onerror无限循环的根源是fallback路径也404
浏览器对 onerror 的处理很严格：第一次加载失败触发事件，执行 this.src = 'fallback.png'；如果 fallback 路径本身不可达（比如相对路径算错、大小写不符、部署后目录偏移），第二次请求仍 404，会再次进入 onerror——但此时浏览器通常静默阻止后续调用，或直接卡死标签页。这不是代码没写对，而是 fallback 图根本没被正确部署或解析。
常见错误现象包括：
– 页面加载变慢、内存持续上涨
– 开发者工具 Network 面板里看到重复请求同一张 fallback 图，状态码全是 404
– onerror 只触发一次，之后再无响应（浏览器已禁用）
– 双击打开 HTML 文件时完全失效（file:// 协议下相对路径解析规则不同）
- 绝对路径优先：
src="/images/logo.png"、onerror="this.src='/images/placeholder.svg'; this.onerror=null;" - 避免
./或../：它们依赖 HTML 所在路径，嵌套路由（如/blog/post/2026/）下极易错位 - 本地开发必须用 Live Server 启动，禁用双击打开 .html 文件
- 用 Network 面板验证真实请求 URL，别信“看起来像对的”
为什么 this.onerror=null 不是可选项
它不是“建议写”，而是浏览器行为规范下的硬性要求。不写这句，等于把重试逻辑交给浏览器自动管理，而浏览器在连续失败后会切断事件链或拒绝执行。更糟的是，某些旧版 Safari 和 Firefox 会在第二次失败后直接抛出未捕获错误，导致 JS 执行中断。
错误写法：onerror="this.src='/img/fallback.jpg'"
正确写法：onerror="this.src='/img/fallback.svg'; this.onerror=null;"（注意分号和顺序）
- 必须写在赋值语句之后，且中间不能换行或插入其他操作
- 不能用函数封装替代，如
onerror="handleError(this)"，因为函数内部若没手动设this.onerror=null，照样循环 - 动态创建的
appendChild()前绑定事件，否则首次错误已发生，事件监听器永远收不到
比路径更可靠的 fallback：用 base64 SVG 内联占位图
路径问题本质是运行时依赖外部资源，而内联 data URL 完全绕过路径解析、CORS、MIME 类型匹配等所有环节。一个最小化 SVG 占位图只需几十字节，压缩后甚至比 HTTP 请求头还小。
示例：onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"
- 复制粘贴即可用，无需额外文件、部署或 CDN 配置
- 支持透明背景、响应式缩放，比 PNG/JPEG 更轻量
- 服务端渲染（SSR）或 JS 加载失败时依然生效
- 若需带文字提示，可用
动态插入图片时 onerror 绑定时机极关键
很多人在 document.createElement('img') 后直接 img.src = url，再 img.addEventListener('error', handler)，最后 parent.appendChild(img)——这几乎必然失败。因为图片加载是异步的，src 赋值后浏览器可能立刻发起请求，而 DOM 还没挂载，error 事件就已触发并丢失。
- 正确顺序：创建元素 → 绑定
error事件 → 设置src→ 挂载到 DOM - 推荐统一用
addEventListener，避免内联字符串拼接带来的作用域和转义问题 - 若用内联
onerror，必须确保字符串中所有单/双引号正确闭合，且this.onerror=null明确写出 - 可加
dataset标记防误触：onerror="if (!this.dataset.err) { this.dataset.err = '1'; this.src = 'data:...'; }"
真正容易被忽略的点是：路径错误和 onerror 失效，90% 都发生在开发阶段用 file:// 协议双击打开 HTML，或部署后 Nginx/Apache 没配好 root 路径。别急着改 JS，先打开 Network 面板，看浏览器到底发了什么请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
