部署不是加标签就完事，必须按匹配优先级写对顺序、补全的src和alt、确保media括号完整、type与服务器content-type严格一致，漏一项浏览器就跳过所有只加载兜底图。
直接说结论：部署 <picture></picture> 不是“加个标签就完事”，而是要按匹配优先级写对 <source></source> 顺序、补全 <img> 的 src 和 alt、确保 media 括号完整、type 与服务器返回的 Content-Type 严格一致——漏一项，浏览器就跳过所有 <source></source>，只加载兜底图。
为什么浏览器总只显示 <img> 兜底图
这不是浏览器不支持，而是所有 <source></source> 都没匹配上，属于静默失败。常见原因包括：
-
media="(max-width: 768px)"写成media="max-width: 768px"（缺括号）✅ 必须带小括号 - 多个
media条件重叠，比如同时写了(max-width: 768px)和(min-width: 768px)，768px 宽度时行为未定义 -
type="image/webp"但 Nginx 返回的是text/plain或image/jpg（注意大小写和拼写） -
<img>缺src，或路径 404，页面留白但无报错
<source></source> 的顺序决定加载结果
浏览器从上到下逐个检查 <source></source>，遇到第一个匹配的就加载并停止，后面全部忽略。所以顺序 = 优先级：
- 把限制最强、最具体的放最前，例如：
media="(min-width: 1200px) and (min-resolution: 2dppx)" - WebP 优先？就把所有
type="image/webp"的<source></source>放 JPEG 前面 - 别混用
srcset中的w和x描述符：写"a@1x.jpg 1x, a@2x.jpg 2x"✅；写"a-400w.jpg 400w, a@2x.jpg 2x"❌（Safari 可能跳过整条） - 3x 图建议放最后，避免高 DPR 设备误选低清图
sizes 写错等于白配 srcset
sizes 不是可选项，它告诉浏览器“这张图在当前布局下大概占多宽”，直接影响 srcset 中 w 描述符的选择。写错就会拉错尺寸的图，浪费带宽：
- 必须是媒体条件 + 宽度单位组合，例如：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"✅ - 不能写
"100%"或"300px"❌（浏览器无法解析） - 要真实反映 CSS 布局：三列网格中，图宽 ≈ 33vw，不是 100vw
- Network 面板里某张
400w图根本没发请求？说明sizes算出的“显示宽度”远大于 400px，它被跳过了
<img> 是强制渲染节点，不是可选装饰
<img> 必须放在 <picture></picture> 最后，且至少满足两个硬性条件：
- 必须有
src（DPR=1 时保底，也是老浏览器唯一入口） - 必须有
alt（无障碍强制要求，SEO 基础） - 推荐加上
width和height（防 CLS 布局抖动） - 别把它当占位符：删掉
src或留空，页面就只剩空白
真正容易被忽略的点是：你写的每一条 media、每一个 type、每一组 sizes，都得跟真实部署环境对得上——本地测试 OK，上线后 Nginx 返回错 MIME 类型，或 CDN 缓存了旧 header，<source></source> 就全失效。别只看渲染效果，打开 Network 面板确认实际加载的是哪张图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
