`<picture>`

HTML <picture> 元素 通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图象呈现在<img>元素占据的空间中。

html 复制代码

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

<img> 元素有两个目的：

描述图像的大小和其他属性及其呈现。
在所有的 <source> 元素提供的图片都不可用时提供备选图片。

<picture> 的常见使用场景：

艺术指导 （Art direction）。针对不同 media 条件裁剪或修改图像（例如，在较小的显示器或图像的详细内容太多时显示较为图像的简单版本）。
遇到不支持的特定格式时，提供替代的图像格式
通过加载最适合观看者显示的图像来节省带宽和提高页面加载速度。

解决方案

html 复制代码

<picture>
    <source srcset="../../../assets/img/aaa.webp" type="image/webp">
    <source srcset="../../../assets/img/aaa.gif" type="image/gif">
    <img @click="goTo()" src="../../../assets/img/aaa.gif">
</picture>