图片标签中的后备图像不起作用答案

【问题标题】：Fallback Image in Picture Tag not working图片标签中的后备图像不起作用
【发布时间】：2019-07-26 21:06:09
【问题描述】：

我尝试使用 html 中的 <picture> 标记来加载“webp”图像以加快加载时间。这可以工作并加载 webp 图像：

<picture>
<source srcset="img/imageXYZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>

这可以工作并加载 png 图像：

<img src="img/imageXYZ.png">

但 Firefox、Chrome 和 Edge 无法加载备用图片。我通过将 webp 图像的名称更改为错误的名称来测试这一点，如下例所示：

<picture>
<source srcset="img/imageXYZZZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>

它只显示“缺少图像符号”，就像您在此处的屏幕截图中看到的那样： Screenshot

编辑：为了让测试发挥作用，Rodrigo Faria 指出了正确的答案。有关我的问题的更具体答案，请参阅我的答案。

【问题讨论】：

标签： html image

【解决方案1】：

我的错误是：备用图像确实有效，例如在 Safari 上加载 png 图像，因为 Safari 不支持 webp 图像。当你给 webp 图像一个错误的名字时，后备 img 就不起作用了，就像我对 srcset="img/imageXYZZZ.webp" 所做的那样。原因是当浏览器不支持该类型（type="image/webp"）时会加载后备图像。 Firefox、Chrome和Edge可以支持该类型并尝试加载webp img然后找不到它，因为它命名错误。但是他们不会再次检查后备图像，他们只会在“类型”或“媒体”发生错误时这样做。

【讨论】：

【解决方案2】：

当没有来源与属性“媒体”匹配时使用备用图像。

对于您的测试，请尝试这样做：

<picture>
   <source srcset="img/imageXYZ.webp" type="image/webp" media="(min-width: 2800px)">
   <img src="img/imageXYZ.png">
</picture>

您会看到媒体不匹配，将使用“img”！

看看这个描述：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

【讨论】：