浏览器始终只加载兜底图，是因为所有均未匹配成功：media语法错误（如缺括号）、type与服务器content-type逐字符不一致、缺少合法标签或其src为空、未带media/type属性导致被跳过。
为什么写了 却始终只加载 ![]()
的图
这不是浏览器不支持，而是所有 <source></source> 都没被匹配上，浏览器直接走兜底——你写的规则根本没生效。
常见原因包括：
-
media值写错：比如media="max-width: 768px"（缺括号），浏览器静默忽略整条<source></source> -
type值与服务器返回的Content-Type不一致，例如写了type="image/webp"，但 Nginx 没配types { image/webp webp; }，响应头是text/plain，Chrome 显示(blocked:mime-type) - 漏掉
<img>，或写了但没填src：Safari 16.4 之前版本会渲染空白，控制台无报错 -
<source></source>没带media或type：单独写srcset不触发选择逻辑，该<source></source>被跳过
media 属性怎么写才不被浏览器忽略
media 必须是合法的 CSS 媒体查询，括号不能省，关键字不能少。
✅ 正确写法：
media="(max-width: 768px)"media="(min-width: 1441px)"media="(prefers-color-scheme: dark)"
❌ 错误写法：
-
media="max-width: 768px"（缺括号） -
media="768px"（不是媒体查询） -
media="screen and (max-width: 768px)"（冗余，<source></source>默认只作用于屏幕媒体）
多个 <source></source> 按顺序匹配，第一个满足 media 的就生效，后面的全跳过。所以宽屏规则建议放前面，窄屏放后面。
type 属性和格式降级的真实行为
type 不是“试试看”，而是硬性 MIME 类型校验：浏览器只加载自己支持且服务端也返回对应 Content-Type 的资源。
关键点：
-
type="image/webp"必须小写，image/WebP在部分安卓 WebView 失效 - AVIF → WebP → JPEG 的降级链必须按支持度从高到低排列：
<source type="image/avif"></source>放最前，<source type="image/jpeg"></source>放最后 -
<img>的src必须是通用格式（如.jpg），不能是.webp——老浏览器靠它兜底 - 不要依赖 JS 检测
supportsWebP后再插入<picture></picture>，DOM 插入时机不对会导致闪动或预加载失效
为什么 里还要给 ![]()
写 srcset 和 sizes
<img> 不只是 fallback，它本身也要适配 DPR 和视口变化——尤其当所有 <source></source> 都不匹配时（比如用户禁用了媒体查询、或用了极少见的 UA）。
实操建议：
-
<img srcset="hero-small.jpg 1x, hero-small@2x.jpg 2x" sizes="100vw">是合理兜底 -
sizes值必须和实际 CSS 布局一致：如果图片父容器max-width: 600px，sizes写成"600px"或"100vw"都可能选错资源 -
<img>的srcset和sizes仅在 fallback 场景生效，不影响<source></source>的匹配逻辑
真正容易被忽略的是：只要 <source></source> 匹配成功，<img> 的 srcset 就完全不参与计算——它只活在兜底路径里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
