feat: 위키 저장소 초기 커밋
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
43
reference/4.api/1.components/9.nuxt-img.md
Normal file
43
reference/4.api/1.components/9.nuxt-img.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: "<NuxtImg>"
|
||||
description: "Nuxt provides a <NuxtImg> component to handle automatic image optimization."
|
||||
links:
|
||||
- label: Source
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtImg.vue
|
||||
size: xs
|
||||
---
|
||||
|
||||
`<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:
|
||||
|
||||
```html
|
||||
<img src="/nuxt-icon.png" />
|
||||
```
|
||||
|
||||
::read-more{to="https://image.nuxt.com/usage/nuxt-img" target="_blank"}
|
||||
Read more about the `<NuxtImg>` component.
|
||||
::
|
||||
Reference in New Issue
Block a user