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
legacyFormat
Format used for fallback. Default is conditional:
png
, webp
and gif
), png
is used for fallbackjpeg
is used for fallbackimgAttrs
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'}"/>