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