显示 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
img
andsource
.
对于图像文件类型后备,请尝试 <source>
元素上的类型属性:
<picture>
<source srcset="bar.webp" type="image/webp">
<img src="bar.jpg" alt="bar">
</picture>
在此示例中,用户代理将选择第一个具有受支持 MIME 类型的类型属性的来源。如果用户代理支持 WebP 图像,将选择第一个源元素。如果没有,将选择 img 元素。