HTML中<picture>标签无法显示WebP及备份JPG图片求助

问题核心错误点 #

• <source>标签不能直接添加style属性，该属性应放在<img>标签上——<source>仅负责提供资源候选，实际渲染的是<img>元素，给<source>加样式完全无效，还可能干扰资源加载逻辑。
• <picture>内部的<img>缺少必要属性（如alt）且未设置基础样式，导致即使满足加载JPG的条件，也无法正常渲染。
• 需确认浏览器窗口宽度是否满足media="(min-width:650px)"的要求：如果窗口宽度小于650px，浏览器会尝试加载<img>的JPG，但之前的写法问题导致它无法显示。

修复后的代码 #

<body>
Test Webp/JPG images: <br /><br />
Image1 Webp (1.4 MB):<br />
<picture>
  <source type="image/webp" media="(min-width:650px)" srcset="../../240806_2066_GotaHovratt_450.webp">
  <img src="../../240806_2066_GotaHovratt_full.jpg" alt="GotaHovratt image" style="width:auto;">
</picture>
<br /><br />
Image2, largest jpg (17 MB):<br />
<img src="../../240806_2066_GotaHovratt_full.jpg" width="1200" >
<br /><br />
Image3, highres jpg (1.2 MB): <br />
<img src="../Highres/240806_2066_GotaHovratt_20.jpg" width="1200" >
</body>

额外检查项 #

1. 直接在浏览器地址栏输入WebP图片的完整URL，确认文件本身没有损坏、能正常打开。
2. 检查服务器是否正确配置WebP的MIME类型（需返回image/webp），若服务器未配置，浏览器可能无法识别资源类型导致加载失败。

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