不能只靠src属性生效，因为它本身不加载图片，仅是容器；真正起作用的是内部和末尾带src的，漏掉或其src会导致空白或404。
为什么 <picture></picture> 不能只靠 src 属性生效
因为 <picture></picture> 本身不加载图片，它只是容器；真正起作用的是内部的 <source></source> 和最后的 <img>。如果漏掉 <img> 或它的 src 属性为空，所有浏览器都会 fallback 失败——显示空白或 404。
常见错误现象：Network 面板里只看到一个低分辨率图被加载，高分辨率图完全没请求；或者在 Safari 里一切正常，Chrome 却始终用 <img> 的 src 而忽略 <source></source>。
-
<source></source>必须写在<img>之前，顺序错就无效 - 每个
<source></source>至少要带media或srcset+type，否则被忽略 -
<img>的src是强制 fallback，不能省略，哪怕只是占位用的最小图
用 srcset + sizes 做分辨率适配最稳妥
单纯靠 media="(min-width: 768px)" 只能按视口宽度切，但真实需求是“在 2x 屏幕上用 2x 图”，这时候 srcset 的 x 描述符比媒体查询更准。
示例：同一张图提供 1x 和 2x 版本，让浏览器按设备像素比自动选
<picture><source srcset="hero-800w.jpg, hero-1600w.jpg 2x" media="(min-width: 640px)"> @@##@@ </source></picture>
-
srcset中逗号分隔多个资源，2x表示该图适用于设备像素比 ≥ 2 的屏幕 -
sizes属性（常和srcset搭配）告诉浏览器“这张图在不同断点下占多宽”，影响选择逻辑；没写时浏览器默认按 100vw 算 - 注意：Chrome 和 Firefox 对
srcset+x支持很好，但旧版 Edge 需要srcset+sizes才可靠
给不同格式图片做 fallback 时，type 值必须精确匹配 MIME 类型
想优先用 webp，再 fallback 到 jpg？<source type="image/webp"></source> 这个 type 值不能写成 webp 或 image/webp;charset=utf-8，否则 Safari 和部分安卓 WebView 直接跳过该 <source></source>。
正确写法只有一种：
<picture><source srcset="hero.webp" type="image/webp"><source srcset="hero.avif" type="image/avif"> @@##@@ </source></source></picture>
- 浏览器按
<source></source>顺序检查type是否支持，第一个支持的就用，后面的全跳过 -
avif在 Chrome 93+、Firefox 93+ 支持，但 Safari 16.4 才开始支持；上线前得查 caniuse 当前覆盖率 - 不要把
jpg和png都塞进<source></source>——它们没有格式优势差异，纯增加解析开销
调试时别只看 Network，要检查 <img src="hero-400w.jpg" alt="hero"> 元素的 currentSrc
浏览器 DevTools 的 Network 面板有时会误导人：比如你改了 srcset，但 Network 里还是旧图，可能只是缓存没清；而真正用了哪张图，得看元素面板里 <img src="hero.jpg" alt="hero"> 的 currentSrc 属性值。
- 在 Console 里执行
document.querySelector('img').currentSrc，返回的就是当前实际加载的 URL - 用 Device Toolbar 切换 DPR（Device Pixel Ratio）比单纯缩放窗口更能触发
x描述符切换 - 如果
currentSrc始终指向<img>的src，说明所有<source></source>都没被采纳——回头检查type、media条件或语法错误
实际项目里最容易被忽略的，是 <img> 的 src 没设或设错了路径，导致整个 <picture></picture> 降级失效；其次就是 type 字符串大小写或拼写偏差——它不像 class 那样容错，错一个字符就当不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
