mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
23 lines
723 B
Markdown
23 lines
723 B
Markdown
|
---
|
||
|
|
title: "<NuxtPicture>"
|
||
|
|
description: "Nuxt provides a <NuxtPicture> component to handle automatic image optimization."
|
||
|
|
---
|
||
|
|
|
||
|
|
`<NuxtPicture>` is a drop-in replacement for the native `<picture>` tag.
|
||
|
|
|
||
|
|
Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](./nuxt-img) but it also allows serving modern formats like `webp` when possible.
|
||
|
|
|
||
|
|
Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).
|
||
|
|
|
||
|
|
## Setup
|
||
|
|
|
||
|
|
In order to use `<NuxtPicture>` you should install and enable the Nuxt Image module:
|
||
|
|
|
||
|
|
```bash [Terminal]
|
||
|
|
npx nuxi@latest module add image
|
||
|
|
```
|
||
|
|
|
||
|
|
::read-more{to="https://image.nuxt.com/usage/nuxt-picture"}
|
||
|
|
Read more about the `<NuxtPicture>` component.
|
||
|
|
::
|