实现浏览器根据其支持的图片格式自动选择对应的格式

lllomh

于 2024-01-24 14:54:42 发布

阅读量505

点赞数 8

分类专栏：我的碎屑世界文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/lllomh/article/details/135822230

版权

我的碎屑世界专栏收录该内容

71 篇文章 1 订阅

订阅专栏

这个查资料,很多有显示就用picture标签. 类似这样的

<picture>
  <!-- 如果浏览器支持 AVIF 格式，则加载 avif 格式的图像 -->
 <source srcSet="/static/img/banner_new.avif" type="image/avif" />
  <!-- 如果浏览器不支持 AVIF，则加载 webp 格式的图像 -->
  <source srcSet="/static/img/banner_new.webp" type="image/webp" />
  <!-- 以下img不需要写文件后缀,只写文件名就行,会自动根据上面的匹配后缀 -->
 <img className={'new'} id={`banner_top`} src="/static/img/banner_new" alt=""/>
</picture>

这样就行了,从上到下的顺序优先.