必须用this.onerror=null切断事件链并配合dataset标记防重入，推荐内联base64占位图彻底规避路径失效风险。
onerror 触发后备用图也 404 怎么办
这是最典型的死循环场景：onerror="this.src='fallback.png'" 看似合理，但只要 fallback.png 本身也返回 404，浏览器会再次触发 onerror，形成无限递归。内存持续暴涨，DevTools 可能卡死，页面无响应。
必须在首次触发时就切断事件链：
- 用
this.onerror = null清除绑定，但仅靠它不够 —— 如果元素是动态创建的，且备用图加载前就报错，this.onerror可能还没来得及赋值 - 更稳妥的是加状态标记：
onerror="if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = 'fallback.png'; }" - 推荐内联 fallback：用
data:image/png;base64,...替代路径，彻底规避二次网络请求
动态创建的 img 元素 onerror 绑定时机不对
通过 document.createElement('img') 创建后，若先 appendChild() 再设置 onerror，很可能第一次加载失败已发生，事件根本没机会触发。
正确做法是：在插入 DOM 前完成绑定和属性赋值：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const img = document.createElement('img');img.src = 'broken.jpg';img.onerror = function() { this.src = 'placeholder.png'; this.onerror = null; };container.appendChild(img);
注意：不能写成 img.setAttribute('onerror', '...')，这会走字符串解析，丢失作用域且无法访问 this。
哪些情况 onerror 根本不会触发
很多人以为“图片没显示出来”就该进 onerror，其实它只对特定网络错误响应。以下情形它完全沉默：
-
src是空字符串、undefined或纯空格 —— 浏览器根本不发请求 - 跨域图片未配
crossorigin，控制台报Blocked by CORS policy，但onerror不触发 - 服务器返回 200 状态码的兜底图（如某些 CDN 的“404 占位图”）—— 浏览器判定为“加载成功”
- 图片文件头正常但数据损坏（JPEG 块坏），此时
naturalWidth === 0可检测，但需额外 JS 判断
真正需要 fallback 的场景，往往得组合判断：onerror + naturalWidth 检查 + load 事件兜底。
全局 error 监听比单个 onerror 更可靠吗
全局监听确实能捕获所有未处理的资源错误，但它不区分目标，也不保证执行顺序。对 <img alt="HTML引入onerror无限循环怎么修改？消除死循环排查步骤" > 处理时，必须手动过滤并防重：
- 用
e.target.tagName === 'IMG'筛选 - 加
dataset.handled防止重复处理同一元素 - 监听要带
true（捕获阶段），否则可能错过早期错误 - 示例：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/png;base64,iVBORw0KGgo...'; } }, true)
不过，全局监听无法替代原生 onerror 的语义明确性；复杂页面建议两者结合，但 fallback 图必须是 data URL 或绝对路径，否则又掉进死循环坑里。
