onerror无限触发的根源是备用图也404时浏览器持续重试：写onerror="this.src='fallback.png'"后若fallback.png加载失败，会再次触发onerror，形成事件链循环；必须加this.onerror=null切断，否则内存飙升、页面卡死。
onerror无限触发的根源是什么
浏览器对 onerror 的响应是“只要 src 加载失败就触发”，但它**不判断新 src 是否真的能加载成功**。所以写成 onerror="this.src='fallback.png'" 后，如果 fallback.png 也 404，就会再次进入 onerror，形成递归调用——不是逻辑循环，而是真实事件链反复激活，内存飙升、标签页卡死都是常见现象。
必须加 this.onerror=null 才算闭环
这是硬性操作，不是可选项。只替换 src 不切断事件，等于给错误开了个永不停止的闸门。
-
onerror="this.src='/img/placeholder.svg'; this.onerror=null"—— 最小可用写法，分号不能省 - 更稳妥的做法是加一层路径判断：
onerror="if (!this.src.includes('placeholder')) { this.src='/img/placeholder.svg'; this.onerror=null; }" - 绝对路径优先：用
/img/placeholder.svg而非./placeholder.svg，避免开发时双击打开 HTML 导致 file:// 协议下路径解析失败 - 推荐用内联 SVG：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，彻底规避路径和跨域问题
动态插入的 <img> 怎么绑定才不丢第一次错误
JS 创建后直接 appendChild()，再补 onerror 是无效的——图片加载失败发生在插入 DOM 的瞬间，事件早已触发并丢失。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须在插入前绑定：
const img = document.createElement('img'); img.onerror = () => { img.src = 'placeholder.svg'; img.onerror = null; }; img.src = 'original.jpg'; container.appendChild(img); - 若用框架（如 React/Vue），不要依赖组件重渲染来“补”
onerror，应在元素创建或首次挂载时完成绑定 - 服务端渲染（SSR）场景下，确保首屏
<img src="...">已带完整onerror属性，不依赖客户端 JS 注入
多图批量处理时为什么 dataset 比 onerror=null 更可靠
当页面有几十张图，且 fallback 图本身也部署在不稳定 CDN 上时，this.onerror=null 只能防一次，但无法区分“这次换源是否已尝试过”。一旦 fallback 图偶发超时或 503，用户看到的就是空白，而不是降级图。
立即学习“前端免费学习笔记（深入）”；
- 用
data-loaded标记状态：onerror="if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = '/img/placeholder.svg'; }" - 支持多级降级：第一次换 CDN 备份，第二次换本地路径，第三次设为 base64 占位图，靠
data-retry-count控制次数 - 注意：
dataset是 DOM 属性，服务端渲染时需确保它被原样输出，否则客户端 JS 读不到初始值
src、服务端返回 200 的兜底 HTML 页面**。这些场景下，它根本不会触发，你写的任何防循环逻辑都失效——此时只能靠 <picture> 格式兜底、绝对路径保障、以及语义化 alt 文本共同构成防线。 
