Usage
<NuxtPicture>
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.
Props
<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
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:
<NuxtPicture
src="/nuxt-icon.png"
:imgAttrs="{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}"
/>