onerror里直接换src必死，因备用图再失败会无限触发onerror；必须用dataset.loaded等布尔标记提前判断，而非依赖this.onerror=null，才能支持多级降级与状态追踪。
onerror 里直接换 src 为什么必死？
因为浏览器对 onerror 的触发不加判断：只要新 src 加载失败，就再次进入 onerror，形成无限递归。你看到页面卡住、内存飙升，甚至控制台被刷屏，根源就是这个没切断的链路。
用 dataset 打标是最稳的布尔控制方式
靠 this.onerror = null 虽然能断链，但无法区分“是第一次失败”还是“已降级过”，也不支持多级 fallback。用 dataset 存状态才是可扩展的布尔控制：
onerror="if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = '/img/placeholder.svg'; }"- 必须在赋新
src前检查dataset.loaded，而不是赋完再设——否则备用图 404 时仍会重入 -
dataset是 DOM 属性，天然支持布尔语义（!this.dataset.xxx即“未设置”），比手动维护全局计数或 class 名更轻量、更隔离 - 避免用
data-loaded="true"再做字符串比较，既冗余又易错（比如写成"True"或空格）
动态创建的 img 怎么安全绑定？
内联 onerror 在 JS 动态插入时不可靠：属性可能被覆盖、this 指向混乱、HTML 字符串拼接易 XSS。正确做法是用 addEventListener + 闭包布尔标记：
const img = new Image();
img.addEventListener('error', function handler() {
if (img.dataset.attempted) return;
img.dataset.attempted = '1';
img.src = '/img/fallback.png';
});
img.src = '/img/original.jpg';
- 不用
this，直接捕获img变量，避免事件处理器中this错位 - 闭包内变量或
dataset都可作布尔开关，但后者能透出到 DOM，方便调试和后续逻辑读取 - 不要在 handler 里调
removeEventListener——DOM 元素还在，下次 error 仍需响应；靠布尔标记就够了
为什么不能只靠 alt 或 CSS background-image 降级？
alt 是无障碍描述，不是视觉 fallback；background-image 不触发 onerror，且无法 programmatically 检测加载结果。真正需要布尔控制的，是那些必须“加载成功才可用”的场景：
- 用户头像：
img失败后要显示默认图标，且不能重复请求 - 关键 banner 图：
src切换后需上报监控，但仅首次失败才报 - SVG 图标内联 base64：
onerror触发说明 base64 解码失败，此时该降级为纯文本
这些场景里，布尔标记不是可选项，而是闭环的必要一环——它把“是否已干预”这个状态固化在元素上，让后续任何逻辑（重试、上报、样式切换）都有据可依。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
