懒加载需与容错机制配合才能可靠：必须设置宽高占位、控制加载时机、兜底失败路径；推荐用 loading="lazy"+onerror+内联svg默认图，并辅以 intersectionobserver 或全局 error 监听提升健壮性。
懒加载本身不解决加载失败问题，必须和容错机制配合。核心是：先确保图片有占位、再控制加载时机、最后兜底失败路径——三者缺一不可。
用 loading="lazy" + onerror 配合基础兜底
原生懒加载需搭配防错逻辑才可靠：
- 必须设置 width 和 height（内联或 CSS），否则未加载时塌陷，onerror 可能因 DOM 不稳定而失效
- onerror 内联写法要加防重：
onerror="this.onerror=null;this.src='/assets/placeholder.svg'" - 默认图推荐用 SVG 或 base64 内联图，避免二次请求失败；例如：
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="12" fill="%23999">图片不可用</text></svg> - alt 文案不能省，它是视觉降级和无障碍的双重保障
data-src 模式下更可控的 fallback 流程
当使用自定义懒加载（如 IntersectionObserver）时，可精细控制失败路径：
- 初始 src 设为极小占位图（如 1×1 base64 GIF），保证布局稳定
- 进入视口后，用
new Image()预检真实 URL：
成功则赋值给 src；失败则直接切换到默认图 URL - 预加载默认图：
const fallback = new Image(); fallback.src = '/assets/fallback.png';，避免 fallback 时首次加载延迟 - 对动态插入的 img 元素，插入前必须手动绑定 onerror 或 observer，否则可能来不及响应错误
全局 error 监听 + 精准过滤（适合 CMS 或多组件场景）
比单个 onerror 更健壮，尤其适合按钮图标、头像等特定类型图片：
- 用捕获阶段监听所有 img 错误：
document.addEventListener('error', handler, true) - 通过 data 属性区分目标，例如只处理
<img data-fallback="button"> - 用
dataset.handled标记防重复替换，避免多次触发 - fallback 图优先用内联 SVG（base64 编码或直接嵌入），彻底规避路径问题
现代 CSS 方案作为补充（非替代 JS）
:has() 可辅助视觉兜底，但不能替代 onerror：
- 先设背景占位：
img { background: #f5f5f5 url(placeholder.svg) center/contain no-repeat; } - 用
img:has(:not([src]))或img[src=""]匹配空/无效 src 状态，强化视觉反馈 - 注意：它无法识别 404 加载失败，仅对缺失 src、协议非法等静态问题有效；真正网络失败仍需 JS 补充
- 适合静态站点、SEO 敏感页或作为 JS 失效时的降级层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
