默认降级图是浏览器在所有失效后的唯一fallback，必须独立工作、语义完整且不依赖外部条件；它不校验存在性，404或mime类型错误仅触发onerror，页面显示空白；需满足路径可靠、格式通用（如jpeg/png）、必含alt属性三条件，并通过cors与csp检查。
默认降级图（即 <img> 标签的 src）不是“随便填个兜底”，而是浏览器在所有 <source></source> 失效后的唯一 fallback，它必须能独立工作、语义完整、且不依赖任何外部条件。
为什么 <img src> 会静默加载失败却没提示？
浏览器对 <picture></picture> 的处理是“顺序匹配 + 静默回退”：只要有一个 <source></source> 匹配成功，就跳过后续所有；如果全部跳过（语法错、media 不命中、type 被服务器拒绝），就直接用 <img src>。但它不会校验这张图是否存在——404 或 blocked:mime-type 都只触发 img.onerror，页面上就是空白或占位符。
-
media="(max-width: 768px)"缺括号 → 整个<source></source>被忽略，不报错 -
type="image/webp"但服务器返回Content-Type: text/plain→ Chrome 标记为(blocked:mime-type)，跳过该<source></source> - 所有
<source></source>都因条件太严（如min-width: 2000px）未命中 → 直接走<img src>
<img src> 必须满足的三个硬性条件
它不是“备用选项”，而是最终防线，不能有侥幸心理：
- 路径必须绝对可靠：推荐用相对根路径（如
/images/fallback.jpg），避免相对路径在子路由下 404 - 格式必须是广泛支持的：优先选
JPEG或PNG，别用AVIF或无后缀 URL - 必须带
alt属性：这是可访问性和 SEO 的底线，也是当图加载失败时用户唯一能读到的信息
要不要给 <img> 加 onerror？
可以，但要注意副作用：
- 简单场景（单图、静态 fallback）：直接写
onerror="this.src='/images/placeholder.jpg'"是最轻量的容错 - 复杂场景（画廊、列表页多图）：建议用事件委托统一监听，否则每个
onerror都会触发一次请求，可能造成重复拉取同一张 fallback 图 - 注意：原生
error事件不冒泡自<source></source>，所以无法靠它捕获<source></source>加载失败 —— 只能监控<img>
真正容易被忽略的一点
<img> 的 src 值哪怕只是临时 placeholder，也必须能通过 CORS 检查（尤其跨域图床）、不能被 CSP img-src 拦截、且不能依赖 JS 运行时才生成 —— 因为它是 HTML 解析阶段就发起的请求，早于任何脚本执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
