onerror="this.onerror=null" 是硬性要求，必须紧接 this.src 赋值后执行以防止事件静默失效；fallback 应用绝对路径或 base64 内联 SVG；alt 需与 fallback 图语义一致。
onerror="this.onerror=null" 是硬性要求，不是可选项
浏览器规范里，onerror 事件本身只触发一次，但如果你在回调里只改 this.src 而不清理监听器，而新地址又 404，这次失败不会再次触发 onerror——它直接静默，图片就卡在裂图或白屏状态。你以为“换图逻辑跑过了”，其实只是第一次赋值后事件被自动卸载，后续再错也不管了。真正导致卡死的，是某些旧版浏览器或特殊网络环境下的递归重试行为，所以 this.onerror=null 必须写，且必须紧接在 this.src 赋值之后，中间不能有分号缺失或顺序颠倒。
绝对路径 or base64，别信相对路径
本地双击打开 HTML、CDN 故障、构建路径错位——这些场景下，你写的 ./fallback.png 很可能比原图还先 404。一旦 fallback 失败，用户看到的就是纯白或灰块，且无任何提示。推荐两种可靠方案：
- 用绝对路径：
/assets/placeholder.svg（确保 Nginx / Apache 已配好该 location） - 用内联 SVG base64：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，零请求、零路径风险、体积通常
动态插入的 <img alt="HTML使用一次性onerror处理图片循环" > 必须提前绑定
通过 document.createElement('img') 创建后，再 appendChild()，接着才绑 onerror，大概率来不及——错误已在插入 DOM 后瞬间触发，事件直接丢失。稳妥做法只有两种：
- 创建时立即赋值：
const img = new Image(); img.onerror = () => { img.src = '/fallback.svg'; img.onerror = null; }; - 用捕获阶段全局监听：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true);
alt 和 onerror 各司其职，别混用
alt 不是视觉降级方案，它只在图片无法加载 + 浏览器决定展示替代文案时才出现（如屏幕阅读器、禁用图片模式）。纯靠 alt 当降级，等于放弃视觉兜底。更关键的是：如果用了 onerror 换图，alt 应与 fallback 图语义一致，而非原图。比如头像加载失败，alt 应写 "默认用户头像"，而不是 "张三的头像"——因为此时显示的已不是张三的图。
立即学习“前端免费学习笔记（深入）”；
