`<NuxtPicture>`

Renders a <picture> element with multiple formats for art direction.

Since Nuxt 3.0 (@nuxt/image) Spec ↗

Syntax

<NuxtPicture src="/img.jpg" :img-attrs="{ alt }" />

Parameters

Name	Type	Required	Description
`src`	`string`	Yes	Source image path or URL.
`format`	`string`	No	Comma-separated formats to emit as `<source>` (e.g. `avif,webp`).
`imgAttrs`	`object`	No	Attributes (like `alt`, `class`) applied to the fallback `<img>`.

Returns

Component — Renders a <picture> with multiple <source> sets.

Examples

<template>
  <NuxtPicture
    src="/hero.jpg"
    format="avif,webp"
    :img-attrs="{ alt: 'Hero', class: 'rounded' }"
    sizes="sm:100vw lg:1200px"
  />
</template>

<template>
  <NuxtPicture
    src="/banner.png"
    width="1600"
    height="400"
    loading="lazy"
  />
</template>

Notes

Requires `@nuxt/image`. Generates modern formats (AVIF/WebP) with a legacy fallback via the `<picture>`/`<source>` mechanism, letting the browser pick the best supported format. Use `<NuxtImg>` for the simpler single-format case.