<nuxt-picture>

Discover how to use and configure the nuxt-picture component.

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

Usage of <nuxt-picture> is almost identical to <nuxt-img> but also allows serving modern formats like webp when possible.

Learn more about the <picture> tag on MDN.

Props

See props supported by<nuxt-img>

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:

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