gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
1.1 KiB
1.1 KiB
title, description, links
| title | description | links | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <NuxtImg> | 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
srcto provider-optimized URLs - Automatically resizes images based on
widthandheight - Generates responsive sizes when providing
sizesoption - 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" />
::read-more{to="https://image.nuxt.com/usage/nuxt-img" target="_blank"}
Read more about the <NuxtImg> component.
::