mirror of https://github.com/nuxt/nuxt.git
39 lines
969 B
Markdown
39 lines
969 B
Markdown
|
---
|
||
|
|
title: "<NuxtImg>"
|
||
|
|
description: "Nuxt provides a <NuxtImg> component to handle automatic image optimization."
|
||
|
|
---
|
||
|
|
|
||
|
|
`<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 nuxi@latest 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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<img src="/nuxt-icon.png" />
|
||
|
|
```
|
||
|
|
|
||
|
|
::read-more{to="https://image.nuxt.com/usage/nuxt-img"}
|
||
|
|
Read more about the `<NuxtImg>` component.
|
||
|
|
::
|