<source>标签资源正常但无法显示，<picture>元素使用疑问

• <picture> 元素规范要求必须嵌套一个 <img> 子元素作为最终渲染载体和兜底回退，所有 <source> 标签仅用于给浏览器提供可选的资源参考，本身没有独立渲染图片的能力，这是你遇到的所有问题的核心原因。

浏览器加载 <picture> 元素时，会按顺序校验所有 <source> 的匹配规则（包括 type 对应的媒体类型、media 对应的媒体查询规则等），匹配到最优资源后，会把该资源地址传给内部的 <img> 完成加载渲染。这个过程不会修改 <img> 标签DOM上写死的 src 属性值，所以你审查元素时始终看到焦点落在 <img> 上，这是正常表现，不代表 <source> 没有生效。

你的两个认知误区 #

1. 删除 <img> 后 <source> 应该自行显示图片
   这个预期完全不符合规范，没有 <img> 作为渲染载体，哪怕 <source> 的资源路径、配置全对，也不会显示任何内容。
2. 仅用 <picture> 包裹 <source> 就能显示图片
   你第二个测试代码不显示图片不是路径的问题，就是因为缺少必须的 <img> 子元素，这种写法本身就是不合法的。

验证你的代码是否正常的方法 #

你第一段给出的代码写法本身完全符合规范，要验证 <source> 是否生效，打开浏览器「网络」面板，筛选图片类型的请求，刷新页面后看logo对应的实际请求资源是不是 logo.webp 即可。只要你用的浏览器支持WebP格式，实际加载的就会是WebP资源，这就是 <source> 生效的直接证据，不需要纠结审查元素时的焦点位置。

内容的提问来源于stack exchange，提问作者machineghost