的 必须指向有效 url，否则所有 失败后将仅显示 alt 文本；正确做法是将其 src 设为 cdn 托管的高可用默认图，而非无效路径。
<picture></picture> 不是“一键开关”，它的降级行为完全取决于你如何组织 <source></source> 和最终 <img>。浏览器不会自动 fallback 到备用图——它只按顺序尝试 <source></source>，失败后仍会渲染 <img>，而如果 <img src> 本身也 404，就只剩 alt 文本。
为什么 <picture></picture> 的 <img> 必须指向有效 URL
这是最常被忽略的硬性前提：<img> 不是“可选备用”，而是 <picture></picture> 渲染链的终点。所有 <source></source> 加载失败时，浏览器仍会发起对 <img src> 的请求。若该地址不可用，整个图片区域就退化为纯文本。
- ✅ 正确做法：把
<img src>指向一个 CDN 托管、高可用的默认图（如占位图或品牌主图） - ❌ 错误写法：
<img src="broken.jpg">—— 这等于主动放弃降级能力 - ⚠️ 注意：
srcset和sizes只作用于<source></source>，不继承给<img>；<img>的尺寸控制必须单独处理
用 onerror 做轻量动态回退
当默认图需按主题/环境动态切换（比如暗色模式下换深色占位图），内联 onerror 是兼容性最好的方案，无需额外 JS。
- 写法必须是
onerror="this.src='/fallback.jpg'"，不能带分号或多余空格 - 仅适用于简单场景；若
<img>同时有srcset，onerror可能不触发（Safari 15.4–15.6 存在 bug） - 重复触发风险：用户快速滚动导致同一张图多次加载失败，会反复请求 fallback 地址
JavaScript 全局监听 error 事件更可控
对中大型项目，统一用 document.addEventListener('error') 捕获所有图片错误，比每个 <img> 写 onerror 更易维护。
- 监听目标要限定为
<img>或<picture></picture>子元素，避免捕获 script/style 错误 - 务必提前把真实图地址存进
data-src，src初始值设为占位图，否则未监听前就已发请求 - 不要在回调里直接改
this.src后立即调用observer.unobserve()—— 需加防抖或检查是否已加载成功，否则可能因网络延迟造成二次触发
真正可靠的降级不是靠某个属性“开一下”，而是从 <img src> 的可用性开始设计。很多人花时间调试 <source></source> 的 media 查询，却让最终 <img> 指向一个本地不存在的路径——这就等于在防洪堤上留了个洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
