onerror中直接改src会导致无限循环雪崩，因浏览器缓存失败URL并重复触发事件；必须用dataset防重入或addEventListener({once:true})绑定，并优先使用base64占位图彻底规避网络请求。
onerror 里直接改 src 为什么会导致雪崩
因为浏览器对同一个 src 的失败响应（比如 404）会缓存，再次赋值相同 URL 时跳过请求，但依然触发 onerror；如果 fallback 图也失败，就形成「赋值 → 触发 error → 再赋值 → 再触发」的无限循环。内存暴涨、CPU 占满、页面卡死是常见现象。
必须加 data-loaded 防重入标记
每次进入 onerror 回调，第一件事是检查是否已尝试过：
if (this.dataset.loaded) return;- 紧接着设
this.dataset.loaded = '1'; - 再清空
this.src = '';，最后赋新值
注意：不能用 this.onerror = null，它在某些动态插入场景下不可靠；dataset 是唯一跨生命周期、可读可写的稳定状态位。
备用图也失败时该怎么做
fallback 图本身也要防雪崩，所以它必须满足三个条件：
立即学习“前端免费学习笔记（深入）”；
- 路径绝对稳定——优先用
data:image/png;base64,...内联 base64，零 HTTP 请求 - 若必须走网络，URL 后加时间戳或随机参数（如
?v=1698765432），避免被缓存判定为“同一失败资源” - 不指向另一个可能出错的动态接口（例如
/api/avatar?size=small），那只是把问题往后推
真正兜底的不是“再换一张图”，而是视觉降级：SVG 占位符、CSS 背景色、甚至仅保留 alt 文本内容——这些都不依赖外部加载。
动态创建的 img 怎么安全绑定 onerror
内联写法 onerror="..." 在 JS 动态插入时极易失效，因为标签还没挂到 DOM 就已触发错误。正确做法是：
- 先创建元素：
const img = document.createElement('img'); - 立即绑定监听：
img.addEventListener('error', handler, { once: true }); - 再设置
src，最后appendChild()
{ once: true } 是关键，它确保回调只执行一次，天然防重入，比手动维护 dataset 更轻量可靠。但要注意：它不能替代 src = '' 清空步骤，否则重试仍会被缓存拦截。
