<NuxtImg>

Nuxt는 자동 이미지 최적화를 처리하는 <NuxtImg> 컴포넌트를 제공합니다.

<NuxtImg>는 기본 <img> 태그를 대체하는 드롭인 컴포넌트입니다.

  • 내장 프로바이더를 사용하여 로컬 및 원격 이미지를 최적화합니다
  • src를 프로바이더 최적화 URL로 변환합니다
  • widthheight에 따라 이미지를 자동으로 리사이즈합니다
  • sizes 옵션을 제공하면 반응형 크기를 생성합니다
  • 네이티브 지연 로딩 및 기타 <img> 속성을 지원합니다

설정

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

터미널
npx nuxt module add image

사용법

<NuxtImg>는 네이티브 img 태그를 직접 출력합니다(주변에 래퍼 없이). <img> 태그를 사용하는 것처럼 사용하세요:

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

결과는 다음과 같습니다:

<img src="/nuxt-icon.png" />
<NuxtImg> 컴포넌트에 대해 더 알아보기.