<NuxtImg>
Nuxt는 자동 이미지 최적화를 처리하기 위해 <NuxtImg> 컴포넌트를 제공합니다.
<NuxtImg>
는 기본 <img>
태그의 대체품입니다.
- 내장된 프로바이더를 사용하여 로컬 및 원격 이미지를 최적화합니다
src
를 프로바이더 최적화된 URL로 변환합니다width
및height
에 따라 이미지를 자동으로 크기 조정합니다sizes
옵션을 제공할 때 반응형 크기를 생성합니다- 네이티브 지연 로딩 및 기타
<img>
속성을 지원합니다
설정
<NuxtImg>
를 사용하려면 Nuxt Image 모듈을 설치하고 활성화해야 합니다:
Terminal
npx nuxt module add image
사용법
<NuxtImg>
는 네이티브 img
태그를 직접 출력합니다 (주변에 래퍼 없이). <img>
태그를 사용하는 것처럼 사용하세요:
<NuxtImg src="/nuxt-icon.png" />
결과는 다음과 같습니다:
<img src="/nuxt-icon.png" />
이것도 참고 image.nuxt.com > usage > nuxt-img※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/components/nuxt-img