Usage

<NuxtPicture>

Source

Discover how to use and configure the Nuxt Picture component.

<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.

Unlike the native <picture> element, <NuxtPicture> currently doesn't support using multiple image sources. See #309 for more info.

Props

See props supported by<NuxtImg>

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'}"
/>

<NuxtImg>

Discover how to use and configure the Nuxt Image component.

useImage()

A Vue composable that returns a helper function to generate optimized image URLs.