Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-16 02:44:51 +00:00
Code Issues Packages Projects Releases Wiki Activity
c2fe249b1f
Nuxt/docs/3.api/1.components/10.nuxt-picture.md
Daniel Roe d1c40328fe
docs: update broken/redirected links (#28739)
2024-08-28 13:28:14 +01:00

915 B
Raw Blame History

title description links
<NuxtPicture> Nuxt provides a <NuxtPicture> component to handle automatic image optimization.
label icon to size
Source i-simple-icons-github https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtPicture.vue xs

<NuxtPicture> is a drop-in replacement for the native <picture> tag.

Usage of <NuxtPicture> is almost identical to <NuxtImg> but it also allows serving modern formats like webp when possible.

Learn more about the <picture> tag on MDN.

Setup

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

npx nuxi@latest module add image

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