最直接有效的替代方案是用onerror事件替换src并立即设this.onerror=null防死循环；全局监听error事件更适合动态图片且兼容性更好。
图片加载失败时，最直接有效的替代方案是用 onerror 事件替换 src，但必须加 this.onerror = null 防止死循环；全局监听 error 事件更适合动态插入的图片，且兼容性更好。
为什么 onerror="this.src='default.png'" 会卡死页面
这是最常见的坑：当备用图也加载失败，onerror 会再次触发，形成无限递归。浏览器可能卡顿、内存暴涨，甚至崩溃。
- 必须在替换后立即切断事件绑定：
onerror="this.src='default.png'; this.onerror=null" - 如果备用图路径仍不可靠（比如也写错了），建议用 base64 占位图兜底，例如
data:image/png;base64,iVBORw0KGgo... - 内联写法只适合静态 HTML；JS 动态创建的
img元素需在插入 DOM 前手动赋值onerror，否则可能来不及绑定就已触发错误
动态图片怎么统一处理——用 document.addEventListener('error', ..., true)
这个方法能捕获所有未被拦截的资源加载错误，对动态添加的 img 标签天然友好，且不依赖 jQuery 或第三方库。
- 第三个参数设为
true表示在捕获阶段监听，确保在错误冒泡前就处理（error事件本身不冒泡，但捕获阶段仍可命中） - 务必检查
e.target.tagName，避免误处理 script、link 等其他资源的错误 - 替换前建议先清空
dataset或计数器，防止重复触发；例如加if (!e.target.dataset.handled) { e.target.dataset.handled = '1'; ... }
路径写错才是最大“隐形杀手”，不是 JS 问题
80% 的“图片加载失败”根本不是代码逻辑问题，而是路径没写对。开发者工具 Network 面板里看到 404 就该停手查路径，别急着写 onerror。
- 本地开发时，始终用
./xxx.png而非xxx.png，避免因服务器路由或文件系统差异导致解析失败 - Linux/Unix 服务器严格区分大小写：
IMG.JPG和img.jpg是两个文件 - 跨域图片（如直接引用外链图床）若没配 CORS，控制台报的是
Blocked by CORS policy，不是 404，这时onerror仍会触发，但换源也无效，得换托管方式
alt 不是“替补”，onerror 才是视觉替补
alt 属性只在图片无法加载时向屏幕阅读器和纯文本环境提供语义描述，它不会让空白区域变有内容，也不会触发任何 JS 行为。想让页面看起来“没出错”，必须靠 onerror 或 CSS 占位。
-
alt应描述图像本意，不是写“图片加载失败”，更不能留空（除非是纯装饰图） - 想隐藏失败图可用
onerror="this.style.visibility='hidden'"，但不如换图直观 - CSS 中用
background-image+:before伪元素也能实现 fallback，但丧失了img的语义和原生懒加载能力
真正难处理的是备用图也失效、又不能改服务端配置的场景——这时候得提前把 fallback 图打包进构建产物，或用内联 base64，而不是临时拼 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
