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: 
npx nuxt module add image

​
Usage

<NuxtImg> outputs a native img tag directly (without any wrapper around it). Use it like you would use the <img> tag: 
<NuxtImg src="/nuxt-icon.png" />
Will result in: 
<img src="/nuxt-icon.png" />

​
Props

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

​
Learn More

NuxtImg Documentation

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