循环中的onerror必须内联绑定，否则首屏加载失败时事件丢失；需加this.onerror=null防死循环，fallback优先用base64确保高可用。
循环输出的 <img> 必须在渲染前就绑定好 onerror，否则首次加载失败时事件已丢失，根本不会触发降级逻辑。
为什么 for 循环里直接写 onerror="this.src='...'" 有时不生效
常见于服务端模板（如 EJS、Nunjucks）或 JS 字符串拼接生成 HTML 的场景。问题不在语法，而在浏览器解析顺序：如果 src 指向的资源立即 404（比如路径拼错、大小写错误、CDN 未同步），浏览器会在 DOM 插入后瞬间触发 error，而此时 JS 还没执行到绑定逻辑，事件就永远错过了。
- 静态模板中，
onerror必须作为内联属性写进 HTML 字符串里，不能靠 JS 后续补 - JS 动态拼接时，
onerror要和src一起出现在字符串中，例如：`<img src="%24%7Burl%7D" onerror="this.src='/placeholder.svg'; this.onerror=null;">` - Vue/React 中用
v-bind:onerror或onError属性，本质仍是最终渲染出带内联onerror的 HTML，不是监听 DOM 事件
onerror 在循环中重复使用时怎么防死循环
所有循环项共用同一张 fallback 图时，最容易踩坑：一旦这张图本身也 404，每个 <img> 都会触发自己的 onerror，全部重试失败 → 全部再触发 → 页面卡死。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 硬性要求：每次赋值新
src前必须加this.onerror=null，切断后续触发 - 更安全写法是加守卫判断：
onerror="if (!this.src.includes('placeholder')) this.src='/placeholder.svg'; this.onerror=null;" - 终极方案是 fallback 直接用 base64：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"，彻底规避路径风险
服务端渲染（SSR）循环列表中 onerror 的关键约束
SSR 输出的 HTML 是“一次性快照”，JS 还没加载，所以首屏图片失败兜底完全依赖内联 onerror。任何寄希望于“等 JS 执行后再统一监听”的做法，在首屏都无效。
-
src值必须是真实可访问的 URL，不能是变量占位符（如{{image_url}}）且服务端未渲染成有效路径 - 绝对路径优先（
/assets/xxx.jpg），避免相对路径在不同路由下解析错乱 - 若 fallback 图由 CDN 托管，确保该 CDN 域名本身高可用——别用另一个可能挂掉的第三方地址
- 不要在 SSR 模板里写
onerror="fallback(this)"并指望客户端 JS 定义fallback函数；函数未定义会导致内联脚本静默失败，onerror彻底失效
真正难的不是写对那一行 onerror，而是确保循环里每一张图的 src 和 fallback 路径，在所有环境（本地、测试、生产）、所有设备、所有网络条件下，都指向一个能立刻返回 200 的资源。路径拼错、大小写混淆、CDN 缓存未刷新，这些才是让 onerror 看似“不工作”的真实原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
