<NuxtPicture>

<NuxtPicture> is a drop-in replacement for the native <picture> tag.

Usage of <NuxtPicture> is almost identical to <NuxtImg> but also allows serving modern formats like webp when possible.

Learn more about the <picture> tag on MDN.

Props

format

Format on pictures can be used to serve images in multiple formats. A legacy format will be generated automatically. So in the example below avif, webp and png would be generated. They will be added in the same order they are added to the format attribute.

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

Available formats are webp, avif, jpeg, jpg, png, and gif. If the format is not specified, it will respect the default image format.

legacyFormat

Format used for fallback. Default is conditional:

• If original format supports transparency (png, webp, and gif), png is used for fallback
• Otherwise jpeg is used for fallback

imgAttrs

Allows you to set additional HTML-attributes on the img element.

Example:

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