<NuxtPicture>

<NuxtPicture> 是原生 <picture> 标签的直接替代品。

<NuxtPicture> 的使用方式与 <NuxtImg> 几乎相同，但还允许在可能的情况下提供现代格式，例如 webp。

了解更多关于 <picture> 标签在 MDN 上的信息。

属性

format

图片上的格式可用于以多种格式提供图片。将自动生成传统格式。因此，在以下示例中，将生成 avif、webp 和 png。它们将按照它们添加到 format 属性中的顺序添加。

<NuxtPicture format="avif,webp" src="/nuxt-icon.png" ... />

可用格式为 webp、avif、jpeg、jpg、png 和 gif。如果未指定格式，它将尊重默认图片格式。

legacyFormat

用于回退的格式。默认值是条件性的

• 如果原始格式支持透明度（png、webp 和 gif），则使用 png 作为回退
• 否则使用 jpeg 作为回退

imgAttrs

允许你在 img 元素上设置其他 HTML 属性。

示例

<NuxtPicture
  src="/nuxt-icon.png"
  :imgAttrs="{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}"
/>