<NuxtImg>

<NuxtImg>는 기본 <img> 태그를 그대로 대체할 수 있는 컴포넌트입니다.

• 내장 프로바이더를 사용해 로컬 및 원격 이미지를 최적화합니다
• src를 프로바이더에 최적화된 URL로 변환합니다
• width와 height에 따라 이미지를 자동으로 리사이즈합니다
• sizes 옵션을 제공하면 반응형 크기를 생성합니다
• 기본 지연 로딩(lazy loading)과 기타 <img> 속성을 지원합니다

Setup

<NuxtImg>를 사용하려면 Nuxt Image 모듈을 설치하고 활성화해야 합니다:

npx nuxt module add image

Usage

<NuxtImg>는 래퍼 없이 기본 img 태그를 직접 출력합니다. <img> 태그를 사용하는 것과 동일한 방식으로 사용하면 됩니다:

<NuxtImg src="/nuxt-icon.png" />

다음과 같이 렌더링됩니다:

<img src="/nuxt-icon.png" />