图片加载失败时浏览器不会自动降级，而是显示空白；正确做法是确保img的src指向100%可访问的默认图（如svg data uri），或用onerror轻量修正，全局error监听需过滤目标并避免死循环。
图片加载失败时只显示空白或alt文本，根本不是“降级”，而是失效
浏览器对 <img> 的容错机制极弱：只要 src 返回 404 或跨域拒绝，它就停在那里，既不尝试 fallback，也不触发重试。你写的 alt="图片加载失败" 只会在禁用图像、屏幕阅读器或网络彻底断开时出现；而多数真实场景下（比如 CDN 崩了、路径写错、权限变更），用户看到的是一个空缺的矩形框，甚至可能破坏布局。
<picture></picture> 不是自动 fallback 工具，<img> 才是最终渲染载体
<picture></picture> 的设计意图是“条件性选择资源”，不是“多层兜底”。所有 <source></source> 都失败后，浏览器仍会尝试加载其内部的 <img> —— 但如果你把 <img src="broken.jpg"> 这样写，那它照样 404，最终还是空。
- ✅ 正确做法：确保
<img>的src指向一个**100% 可访问的默认图**（如 CDN 上的占位图、SVG Data URI 或同域静态资源） - ⚠️ 常见错误：把
<img>当成“备用 source”，填个无效路径，以为能链式 fallback - ? 性能提示：用 SVG Data URI 作默认图可避免额外请求，例如
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f0f0f0'/%3E%3Ctext x='50' y='55' font-size='14' text-anchor='middle' fill='%23999'%3Eimage%3C/text%3E%3C/svg%3E"
用 onerror 修正单张图比写 JS 更快，但别滥用
内联 onerror 是最轻量的主动降级手段，IE9+ 全支持，且不依赖外部脚本。但它只适用于简单替换，且有明显限制。
- ✅ 适合场景：头像、图标等尺寸固定、fallback 确定的图片，例如
<img src="user.jpg" onerror="this.src='/img/avatar-fallback.svg'" alt="用户头像"> - ❌ 不适合：含
srcset/sizes的响应式图，因为onerror不区分哪个资源失败，且可能在不同断点重复触发 - ⚠️ 注意：多次触发时，若 fallback 地址也 404，会无限循环；建议 fallback 地址用绝对路径 + 版本哈希（如
/img/fallback.abc123.svg）保稳
全局监听 error 事件能统一管控，但必须过滤目标
在 document 上监听 error 事件可捕获所有图片加载失败，适合中大型项目集中处理。但它的触发范围太广，不加过滤会干扰脚本错误、CSS 加载失败等其他事件。
- ✅ 正确写法：用
event.target判断是否为<img>，再检查是否在<picture></picture>内部，例如：
document.addEventListener('error', (e) => {
if (e.target instanceof HTMLImageElement && e.target.closest('picture')) {
if (!e.target.src.includes('fallback')) {
e.target.src = '/img/placeholder.svg';
}
}
}, true);
- ⚠️ 容易踩的坑：没加
true（捕获阶段），导致部分动态插入的<img>漏监听；或没判断e.target.src是否已设为 fallback，造成死循环 - ? 兼容性提醒：该方案在 IE 中不工作（IE 不支持
error事件冒泡到 document），需单独 polyfill 或降级为onerror注入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
