Lzh on GitHub

<NuxtPicture>

Source
了解如何使用和配置 Nuxt Picture 组件。

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

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

了解更多 关于 MDN 上的 标签的信息.

与原生的 <picture> 元素 不同，<NuxtPicture> 目前不支持使用多个图像源。有关更多信息，请参阅 #309。

Props

请参阅 <NuxtImg> 支持的属性。

format

图片上的 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'
  }"
/>