最常用轻量方案是在<img>标签中用onerror属性实现加载失败换源并防死循环，需设this.onerror=null且默认图路径可靠；进阶可隐藏破裂图再显示默认图；框架中需适配数据流避免渲染循环；纯CSS方案仅作视觉兜底。
直接在 <img> 标签里用 onerror 属性是最常用、最轻量的方式，核心是“加载失败时换源 + 防止死循环”。
基础写法：一行搞定，默认图路径要可靠
确保默认图片本身能稳定加载，否则会触发重复错误。推荐写法：
<img src="user.jpg" onerror="this.src='default-avatar.png'; this.onerror=null;" alt="用户头像">-
this.onerror=null必须加上，避免默认图也加载失败时无限重试 - 默认图建议用相对路径或 CDN 上已验证可用的地址，尺寸尽量小（如 40×40 PNG）
进阶处理：隐藏破裂图，再显示默认图
有些场景下，不想让浏览器默认的“裂图图标”闪一下，可先隐藏图片，出错后切换为默认图容器：
- HTML：
<div class="img-wrapper"><img src="photo.jpg" onerror="this.parentElement.innerHTML='<img src="default.png" alt="默认图">'></div> - 更稳妥的做法是配合 CSS 控制初始状态：
img { display: block; } .img-wrapper img:error { display: none; }，再用 JS 插入默认图 - 注意：内联 HTML 字符串需转义引号，生产环境建议用 DOM 操作替代 innerHTML
框架中安全 fallback（Vue/React）
在响应式框架里，不能简单赋值 this.src，否则可能破坏数据流或引发渲染循环：
立即学习“前端免费学习笔记（深入）”；
-
Vue：用
@error.once修饰符 +ref直接操作 DOM<img :src="url" ref="imgEl" @error.once="handleImgError" />
方法中：this.$nextTick(() => this.$refs.imgEl.src = defaultUrl) -
React：在
onError中校验当前src是否已是默认图onError={(e) => { if (e.target.src !== defaultUrl) e.target.src = defaultUrl; }} - 两者都建议提前预加载默认图：
new Image().src = defaultUrl，避免 fallback 时白屏延迟
纯 CSS 备选方案：适合静态占位
不依赖 JS，兼容性极好，但无法响应真实加载结果，仅作视觉兜底：
- 用
<div>包裹<img>，设置背景图为默认图：background: url(default.png) center/cover no-repeat; - 图片正常加载时覆盖背景；加载失败时背景自然显现
- 缺点：无法获知加载是否成功，alt 文字也不会显示，适合对语义要求不高的场景（如卡片封面）
