Usage of <nuxt-picture> component

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 and at the moment only supports native lazy loading.


See props supported by nuxt-img


Format used for fallback. Default is conditional:

  • If original format supports transparently (png, webp and gif), png is used for fallback
  • Otherwise jpeg is used for fallback
Edit this page on GitHub Updated at Sat, Apr 10, 2021