浏览器按顺序匹配第一个满足条件的<source>，未匹配则回退到<img src>；常见原因包括<source>缺media/type、media语法错误（如漏括号）、Content-Type与type不匹配、Safari中<img>缺src致空白，media与srcset正交配合，sizes必须写在<img>上且断点需互斥。
为什么写了 却始终加载 ![HTML中picture标签和source配合]()
的 src
浏览器只按顺序匹配第一个满足条件的 <source>，一旦没匹配上，就直接 fallback 到 <img> 的 src——这不是 bug，是规范行为。常见原因包括：
-
<source>没写media也没写type→ 整条被忽略 -
media="(max-width: 768px)"写成media="max-width: 768px"（漏括号）→ 解析失败，不匹配 - 服务器返回
image/webp文件，但响应头是Content-Type: image/jpeg→ 浏览器静默跳过该<source> - Safari 16.4 之前版本中，
<img>缺src→ 页面空白，控制台无报错
media 和 srcset 怎么配合才不白写
media 控制“用不用这张源”，srcset 控制“在这张源里选哪个分辨率”。两者正交，不能互相替代：
- 某个
<source>匹配成功，但它的srcset里只有400w和800w，而当前渲染宽度是 600px → 浏览器选最接近的（通常是 800w），不会跨<source>查找 -
sizes必须写在<img>上，且值要和 CSS 实际渲染宽度一致；比如图片在移动端占满视口，就得写sizes="(max-width: 768px) 100vw, 50vw" -
srcset中用w描述符（如"hero-400w.jpg 400w"）必须配sizes才能算出物理尺寸；只用x（如"a.jpg 2x"）只适配 DPR，不解决尺寸切换
多个 的顺序怎么排才不冲突
顺序决定匹配优先级，从上到下，命中即停。典型错误是断点重叠或单位缺失：
- 写成
media="(max-width: 768px)"和media="(min-width: 768px)"→ 在 768px 宽度下，两条都可能匹配，但浏览器只取第一条，第二条永远不生效 - 正确写法是互斥断点：
max-width: 768px、min-width: 769px) and (max-width: 1200px)、min-width: 1201px - 所有
media值必须带单位（768px），写768是无效媒体查询 -
<img>必须作为<picture>的最后一个子元素，且必须含src和alt；否则不匹配时页面空白
动态改 source.media 为什么没反应
浏览器只在 DOM 插入或窗口 resize 时重新评估 media，不监听属性变化。直接改 source.media 不会触发重选：
立即学习“前端免费学习笔记（深入）”；
- 修改后手动调用
pictureElement.querySelector("img").src = ""强制重载 → 破坏缓存，不推荐 - 更稳妥的是重建整个
<picture>结构，或用matchMedia()监听并显式切换<img>的src - 注意：用
display: none隐藏<picture>时，Chrome 会暂停所有<source>加载，包括已匹配的——这是规范行为，不是 bug
