<NuxtImg>

<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:

```bash [Terminal] 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:

```html
<NuxtImg src="/nuxt-icon.png" />

Will result in:

<img src="/nuxt-icon.png" />

::read-more{to="https://image.nuxt.com/usage/nuxt-img" target="_blank"} Read more about the <NuxtImg> component. ::