onerror死循环在循环渲染中更危险，因大量图片节点几乎同时触发错误→换图→再失败→重复触发，导致浏览器卡顿、内存飙升、DevTools无响应；必须用绝对路径或base64并立即执行this.onerror=null。
onerror死循环在循环渲染节点里为什么更危险
因为模板引擎（如Vue的v-for、React的map()、或原生innerHTML += <img>）会批量插入大量<img>，一旦备用图路径不可靠，所有节点几乎同时触发onerror→换src→再失败→再触发，瞬间堆积数百个重复请求和DOM操作。浏览器卡顿、内存飙升、DevTools直接无响应是常见现象。
静态写法必须加this.onerror=null且用绝对路径或base64
在循环生成的HTML字符串中，不能只写onerror="this.src='fallback.png'"。必须确保每次替换后立即切断事件，且fallback资源本身100%可用：
-
onerror内联逻辑要完整：例如onerror="this.src='/img/placeholder.svg'; this.onerror=null;"，分号不能省，顺序不能颠倒 - 绝对路径优先：避免
./fallback.png在路由嵌套或base标签影响下解析失败 - 推荐用base64 SVG占位图：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"，彻底规避路径风险 - 禁用相对路径拼接：
onerror="this.src=`${window.location.origin}/fallback.jpg`"这类JS拼接在SSR或预渲染时不可靠，也不该出现在静态HTML中
动态渲染必须提前绑定onerror，不能靠后续事件监听
React/Vue等框架中，如果图片是懒加载或条件渲染（如v-if或useState切换），onerror属性可能在DOM插入后才被框架挂载——此时首次加载失败已发生，事件丢失，降级失效。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- Vue中应在
mounted或onMounted里遍历ref获取img元素，手动addEventListener('error', handler)，并设dataset.fallbacked防重复 - React中推荐用
useEffect+ref，对每个img单独绑定，不要全局监听document.error——它无法区分哪个节点失败，容易误伤 - 纯JS动态插入时，必须在
appendChild()前就赋值img.onerror = function() { ... }，而不是插入后再查DOM补绑
服务端渲染时，onerror逻辑必须与CDN缓存策略对齐
SSR输出的HTML若含onerror，但fallback图托管在CDN上，而CDN节点未同步更新或缓存了旧版404响应，就会导致所有节点统一失败并死循环——这种问题在线上压测时才暴露，本地开发完全看不出来。
- fallback图必须走独立CDN路径，且配置
Cache-Control: public, max-age=31536000（一年），避免CDN返回stale 404 - 禁止把fallback图放在和业务图相同的路径下（如都用
/images/xxx.png），否则一次CDN故障全站图片降级失效 - 上线前用curl验证fallback URL是否真实返回200+正确Content-Type：
curl -I https://cdn.example.com/img/placeholder.svg - 若用Webpack/Vite构建，可将base64占位图直接注入HTML模板，绕过CDN依赖
真正的难点不在“怎么写onerror”，而在“怎么让fallback资源在任意网络、CDN、缓存、路由条件下都稳定返回200”。很多团队花两周调onerror逻辑，最后发现是CDN缓存了上游404，白忙一场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
