`<NuxtImg>`

Optimized image component (from @nuxt/image) with on-the-fly resizing.

Since Nuxt 3.0 (@nuxt/image) Spec ↗

Syntax

<NuxtImg src="/img.png" width="800" />

Parameters

Name	Type	Required	Description
`src`	`string`	Yes	Image path or URL (relative to the public dir or a provider).
`width`	`number \| string`	No	Target width; with `height` controls resizing and aspect ratio.
`sizes`	`string`	No	Responsive sizes hint to generate a srcset.

Returns

Component — Renders an optimized <img> element.

Examples

<template>
  <NuxtImg
    src="/hero.jpg"
    width="1200"
    height="600"
    format="webp"
    loading="lazy"
  />
</template>

<template>
  <NuxtImg
    src="/photo.jpg"
    sizes="sm:100vw md:50vw lg:400px"
    densities="x1 x2"
  />
</template>

Notes

Requires the `@nuxt/image` module. Renders a single `<img>` with automatic resizing, format negotiation, and lazy loading. Use `<NuxtPicture>` for art-direction with multiple `<source>` types. Configure providers (Cloudinary, IPX, etc.) in `nuxt.config`.