显示 img 回退的正确方法
Correct way to display an img fallback
前提：我对 img 和 source 标签的工作原理做了很多研究，但每篇文章都只是粗略地介绍了这些标签的属性。
我需要确定如果浏览器不支持图像格式（例如.wepb，但可以是.raw或.nef），或者path/url 是错误的，有一个正确的回退到 .jpg，然后到 alt。我想到了这两个解决方案：
<!-- First solution -->
<img src="foo.jpg" alt="foo"
srcset="foo.webp 1x">
<!-- Second solution -->
<picture>
<source srcset="bar.webp">
<img src="bar.jpg" alt="bar">
</picture>
它们都不起作用，事实上，如果找不到文件，或者如果我尝试使用不受支持的扩展名，则 src 没有回退，但会触发 alt。
Every single article only superficially deals with the attributes of img and source.
对于图像文件类型后备，请尝试 <source> 元素上的类型属性：
<picture>
<source srcset="bar.webp" type="image/webp">
<img src="bar.jpg" alt="bar">
</picture>
在此示例中，用户代理将选择第一个具有受支持 MIME 类型的类型属性的来源。如果用户代理支持 WebP 图像，将选择第一个源元素。如果没有，将选择 img 元素。
前提：我对 img 和 source 标签的工作原理做了很多研究，但每篇文章都只是粗略地介绍了这些标签的属性。
我需要确定如果浏览器不支持图像格式（例如.wepb，但可以是.raw或.nef），或者path/url 是错误的，有一个正确的回退到 .jpg，然后到 alt。我想到了这两个解决方案：
<!-- First solution -->
<img src="foo.jpg" alt="foo"
srcset="foo.webp 1x">
<!-- Second solution -->
<picture>
<source srcset="bar.webp">
<img src="bar.jpg" alt="bar">
</picture>
它们都不起作用，事实上，如果找不到文件，或者如果我尝试使用不受支持的扩展名，则 src 没有回退，但会触发 alt。
Every single article only superficially deals with the attributes of
imgandsource.
对于图像文件类型后备，请尝试 <source> 元素上的类型属性：
<picture>
<source srcset="bar.webp" type="image/webp">
<img src="bar.jpg" alt="bar">
</picture>
在此示例中，用户代理将选择第一个具有受支持 MIME 类型的类型属性的来源。如果用户代理支持 WebP 图像，将选择第一个源元素。如果没有，将选择 img 元素。