onerror死循环须用data-loaded状态标记+this.onerror=null切断事件，而非计时器；空src、CORS阻塞、200兜底页等场景onerror根本不触发，需额外校验。
onerror死循环不是靠计时器防，而是靠状态标记和事件切断
很多人搜“onerror 计时器 防死循环”，误以为要 setTimeout 延迟执行或加倒计时重试——其实完全没必要，也解决不了根本问题。onerror 触发的死循环本质是：备用图也 404 → 再次触发 onerror → 再换图 → 无限加载。浏览器不会等你计时，它只要发现 src 变了且加载失败，立刻再进 onerror。
真正有效的做法只有两个硬性动作：设状态标记（如 data-loaded） + 立即切断事件（this.onerror = null）。计时器不仅无效，还可能掩盖路径错误、延迟降级、甚至干扰首次渲染。
为什么用 data-loaded 比 this.onerror=null 更可靠
单纯写 this.onerror=null 能阻止二次触发，但有个隐藏风险：如果 fallback 图本身被 CDN 缓存了 404 响应（比如 Nginx 返回了 404 HTML 页面而非图片），浏览器仍会认为“加载完成”，this.onerror 已被清空，结果就是显示一个损坏图或空白，且无法再捕获。
用 data-loaded 标记能实现闭环判断，且兼容后续 JS 扩展：
onerror="if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; }"- 标记在赋值前检查，避免重复操作
- fallback 用 base64 SVG，彻底绕过路径、跨域、CDN 缓存 404 的所有风险
- 后续 JS 可通过
img.hasAttribute('data-loaded')统一识别是否已降级
动态创建的 img 元素，onerror 必须在插入 DOM 前绑定
这是最容易漏掉的一环：用 document.createElement('img') 创建后，如果先 appendChild() 再设置 onerror，很可能图片已经发起请求并失败，事件直接丢失——用户看到的就是断裂图标，连 fallback 都没机会触发。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
正确顺序必须是：
- 创建元素：
const img = document.createElement('img') - 立即绑定 onerror（含 data-loaded 判断）：
img.onerror = function() { if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = '...'; } } - 再设置 src：
img.src = 'user-avatar.webp' - 最后插入：
container.appendChild(img)
注意：不要用内联字符串写法（如 img.setAttribute('onerror', '...')），IE 和部分 WebView 对该方式支持不稳定；优先用 .onerror = function(){} 或 addEventListener('error', ...)。
哪些情况 onerror 根本不触发，计时器也救不了
别把 onerror 当万能钩子。它只响应“浏览器发出了请求，且网络层返回了非 2xx/3xx 状态码”（如 404、403、500）。以下场景它完全沉默，任何计时逻辑都无效：
-
src是空字符串、undefined或纯空格 —— 浏览器压根不发请求 - CORS 阻塞（比如跨域图没加
crossorigin）—— 控制台报错，但onerror不触发 - 服务器返回 200 状态码的兜底页（如某些 CDN 的“图片不存在”HTML 页面）—— 浏览器认为“加载成功”
- 图片文件头正常但数据损坏（JPEG 数据块坏）—— 可用
img.naturalWidth === 0检测，但需额外监听load后手动判断
这些场景必须靠其他手段兜底：空 src 提前校验、CORS 显式声明、服务端确保 fallback 资源返回真实图片 MIME 类型、关键图加载后检查 naturalWidth。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
