onerror一换图就卡死是因为备用图404导致无限循环触发，唯一可靠解法是onerror="this.src='data:image/svg+xml,...'; this.onerror=null;"，用内联data URL彻底规避网络请求失败风险。
onerror 为什么一换图就卡死
直接写 onerror="this.src='fallback.jpg'" 是最常见也最危险的写法。一旦 fallback.jpg 本身加载失败（路径错、404、跨域、CDN 故障），浏览器会再次触发 onerror，形成无限循环。内存飙升、主线程阻塞、甚至标签页无响应都是典型表现。
data URL 降级怎么写才真正防循环
用 data URL 替代外部图片路径，本质是把“备用图”变成一段内联字符串，彻底绕过网络请求环节——没有请求，就没有失败，自然不会二次触发 onerror。
可靠写法必须同时满足两点：
-
onerror回调里先执行this.onerror = null，切断事件绑定 - 备用图必须是 data URL，比如极简 SVG 占位符：
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E
完整示例：<img src="broken.png" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1\' height=\'1\'%3E%3C/svg%3E'; this.onerror=null;">
动态创建 img 元素时怎么安全绑定 onerror
内联写法只适用于静态 HTML。JS 动态创建的 <img> 如果在插入 DOM 后再补 onerror，很可能来不及绑定就已触发错误。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
正确做法是在插入前就设置好事件处理器：
- 用
addEventListener('error', handler)，避免内联字符串解析风险 - handler 内部必须立刻执行
img.onerror = null或img.removeEventListener('error', handler) - 替换
src时优先选 data URL，次选绝对路径（确保 fallback 图 100% 可达）
示例：
const img = document.createElement('img');<br>img.src = 'user-avatar.jpg';<br>img.addEventListener('error', function() {<br> this.src = 'data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%228%22 fill=%22%23eee%22/%3E%3C/svg%3E';<br> this.removeEventListener('error', arguments.callee);<br>});<br>document.body.appendChild(img);
为什么不能只靠 alt 属性兜底
alt 是语义化描述，不是视觉降级方案。当图片加载失败时，alt 文本仅在图片区域显示为纯文字，无法控制尺寸、背景、对齐或交互；对按钮类图片（如带 onclick 的 <img>），白屏+文字根本无法点击，体验断裂。
真正可用的降级必须维持原有布局占位和可操作性，data URL 是目前唯一能兼顾「零请求失败」「保持宽高比」「不依赖外部资源」的轻量解法。别省那几字节 base64 —— 一个 1×1 的 SVG 才 60 字符左右，换来的是稳定性和可预测性。
