Skip to main content
<NuxtImg> is a drop-in replacement for the native <img> tag.
  • Uses built-in provider to optimize local and remote images
  • Converts src to provider-optimized URLs
  • Automatically resizes images based on width and height
  • Generates responsive sizes when providing sizes option
  • Supports native lazy loading as well as other <img> attributes

​
Setup

In order to use <NuxtImg> you should install and enable the Nuxt Image module:

​
Usage

<NuxtImg> outputs a native img tag directly (without any wrapper around it). Use it like you would use the <img> tag:
Will result in:

​
Props

<NuxtImg> accepts all native <img> attributes plus additional props for image optimization:
​
string
required
The source URL of the image.
​
number
The width of the image in pixels. Used for image optimization.
​
number
The height of the image in pixels. Used for image optimization.
​
string
Responsive sizes for different viewport widths. Example: "sm:100vw md:50vw lg:400px"
​
string
Alternative text for the image. Important for accessibility.
​
string
The target format for image optimization (e.g., "webp", "avif", "png").
​
number
The quality of the optimized image (0-100).
​
'lazy' | 'eager'
Native lazy loading attribute.
​
string
The image provider to use (e.g., "cloudinary", "imgix", "ipx").
​
string
A predefined set of image modifiers.

​
Learn More

NuxtImg Documentation

Read the complete documentation for <NuxtImg> component in the Nuxt Image module docs.