onerror中直接改src会导致死循环，因为备用图再失败会重复触发onerror；必须紧接执行this.onerror=null切断事件，顺序不可颠倒，分号不能省。
onerror里直接改src为什么会导致死循环
因为浏览器不会自动阻止第二次错误——this.src='fallback.png'执行后，如果备用图也加载失败（比如路径错、404、跨域），onerror会再次触发，接着又执行一遍赋值，形成无限重试。内存涨、页面卡、控制台静默或报RangeError: Maximum call stack size exceeded都是典型表现。
必须写this.onerror=null的两种可靠写法
防死循环的核心动作是：**替换完src后立刻切断事件绑定**，顺序不能颠倒，分号不能少。
-
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"—— 内联最简写法，适用于静态模板或 CMS 输出 -
onerror="if (!this.dataset.fallback) { this.dataset.fallback = '1'; this.src = '/assets/placeholder.svg'; }"—— 加标记更稳妥，避免因多次插入同一 DOM 节点导致重复绑定
注意：this.onerror=null必须紧接在this.src=...之后；用dataset方式时，不要依赖onerror本身做判断（比如!this.onerror），它可能已被清空但事件仍残留。
动态创建的img元素怎么安全绑定onerror
JS 动态生成的<img>，如果先appendChild再绑定onerror，很可能图片已触发错误但监听还没挂上，直接漏掉。正确做法是在插入 DOM 前就设好：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const img = document.createElement('img');
img.src = 'broken.jpg';
img.onerror = function() {
this.src = '/assets/placeholder.svg';
this.onerror = null;
};
container.appendChild(img);
不推荐用addEventListener('error', ...)替代——error事件不冒泡，且对<img>只在捕获阶段能稳定命中，容易遗漏。
fallback图本身不可靠时怎么办
就算写了this.onerror=null，如果备用图路径还是错的，用户看到的就是空白——因为浏览器不会再触发onerror，也没 fallback 可兜底。此时必须确保 fallback 图绝对可用：
- 用绝对路径，比如
/images/logo-fallback.svg，别用./fallback.png - 优先选 SVG 或 base64 占位图，例如
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0ibGlnaHRncmF5Ii8+PC9zdmc+ - 提前预加载：
new Image().src = '/assets/placeholder.svg'，验证它能返回 200
真正难处理的是 fallback 后要不要再 fallback——比如 SVG 也加载失败（极少见但可能发生在某些 CDN 配置下），这时只能靠全局 error 捕获或 :has() CSS 方案兜底，但它们都有兼容性或语义限制，不是所有场景都能覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
