<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

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