<NuxtImg>

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

• 내장 공급자를 사용하여 로컬 및 원격 이미지 최적화
• src 공급자에 최적화된 URL로 변환
• width, height 을 기준으로 이미지 크기를 자동으로 조정
• sizes 옵션 제공 시 반응형 크기 생성
• 기본 지연 로딩 및 기타 <img>속성을 지원

 

설정

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

npx nuxi@latest module add image

 

사용법

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

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

아래 결과로 변한다.

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

 

Props

• src : 이미지 파일 경로 
  src 는 public/ 디렉터리의 정적 이미지에 대한 절대 경로 형식이어야 한다 . 그렇지 않으면 또는 URL 로 시작하는 공급자가 예상하는 경로다.
  
  
• widh / height : 이미지의 너비/높이를 지정한다.
  아이콘이나 아바타와 같은 정적 크기의 이미지에 원하는 너비/높이를 사용한다.
  반응형 이미지에 원본 이미지 너비/높이 사용 (sizes 사용 시)
  
  
• sizes : 반응형 크기를 지정한다.
  이는 공백으로 구분된 화면 크기/너비 쌍 목록이다. 기본적으로 Nuxt 는 반응형 우선 크기 조정을 생성한다.
  
  화면 크기 접두사(예:  sm:)를 생략하면이 크기가 이미지의 '기본' 크기가 됩니다. 그렇지 않으면 Nuxt는 가장 작은 크기를 이미지의 기본 크기로 선택한다.
  
  이 기본 크기는 다음에 지정된 화면 너비까지 사용됩니다. 지정된 각 크기 쌍은 위쪽으로 적용된다 . 즉 md:400px 인 경우, 화면크기가 md 이상일 때, 이미지 크기가 400px 으로 조정 됩니다.
  
  사용 예)
  
  

<NuxtImg
  src="/logos/nuxt.png"
  sizes="100vw sm:50vw md:400px"
/>

사전 정의된 스크린 사이즈

// nuxt.config.ts

export default defineNuxtConfig({
  image: {
    // The screen sizes predefined by `@nuxt/image`:
    screens: {
      'xs': 320,
      'sm': 640,
      'md': 768,
      'lg': 1024,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536
    },
  }
})

• densities : 픽셀 밀도가 증가된 화면을 위한 특수 버전의 이미지를 생성
  예)
  
  

<NuxtImg
  src="/logos/nuxt.png"
  height="50"
  densities="x1 x2"
/>
<!--
<img
  src="/_ipx/w_50/logos/nuxt.png" 
  srcset="/_ipx/w_100/logos/nuxt.png x2"
/>
-->

• placeholder : 실제 이미지가 완전히 로드되기 전에 placeholder 이미지를 표시
  placeholder 속성은 문자열, 부울, 숫자 또는 배일일 수 있다. 각 경우에 대한 사용법은 아래와 같다.
  
  

<!-- Automatically generate a placeholder based on the original image -->
<nuxt-img src="/nuxt.png" placeholder />

<!-- Set a width, height for the automatically generated placeholder  -->
<nuxt-img src="/nuxt.png" :placeholder="[50, 25]" />

<!-- Set a width, height, quality & blur for the automatically generated placeholder  -->
<nuxt-img src="/nuxt.png" :placeholder="[50, 25, 75, 5]" />

<!-- Set the width & height of the automatically generated placeholder, image will be a square -->
<nuxt-img src="/nuxt.png" :placeholder="15" />

<!-- Provide your own image -->
<nuxt-img src="/nuxt.png" placeholder="./placeholder.png" />

 

원본 이미지를 기반으로 placeholder 이미지를 생성하는데 useImage() 를 활용할 수도 있으며, 소스가 SVG이거나 수정자를 더 잘 제어하려는 경우 유용할 수 있다.

<script setup>
const img = useImage()
</script>

<template>
  <NuxtImg :placeholder="img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })" src="/nuxt.svg`" />
</template>

 

• provider : 지정된 기본 공급자 옵션 대신 nuxt.config 에 지정된 다른 공급자를 사용한다.
  예)
  
  

<!--
index.vue
-->

<template>
  <NuxtImg
    provider="cloudinary"
    src="/remote/nuxt-org/blog/going-full-static/main.png"
    width="300"
    height="169"
  />
</template>

// nuxt.config.ts

export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/nuxt/image/upload/',
    },
  },
})

 

• preset : 프로젝트에서 통합된 형태의 이미지를 만드는 데 사용할 수 있는 사전 정의된 이미지 수정자 세트다.
  참고) nuxt.config 에서 사전 설정 옵션을 사용하여 preset을 정의할 수 있다.

<!--
index.vue
-->

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

// nuxt.config.ts

export default defineNuxtConfig({
  image: {
    presets: {
      cover: {
        modifiers: {
          fit: 'cover',
          format: 'jpg',
          width: 300,
          height: 300,
        },
      },
    },
  },
})

 

• format : 특정 형식으로 이미지를 제공하려는 경우 이 속성을 사용한다.
  사용 가능한 형식은 webp, avif, jpeg, jpg, png및 gif 이다. 형식을 지정하지 않으면 기본 이미지 형식 svg 가 적용된다.

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

 

• quality : 이미지의 품질을 지정한다.

<NuxtImg src="/nuxt.jpg" quality="80" width="200" height="100" />

 

• fit : 이미지의 크기를 지정한다. 이 속성에 사용할 수 있는 5가지 표준 값이 있다.
  • cover: (기본값) 종횡비를 유지하고, 이미지에 맞게 자르기/클리핑하여 제공된 두 치수를 모두 포함하는지 확인한다.
  • contain: 가로 세로 비율을 유지하며 필요한 경우 "레터박스"를 사용하여 제공된 두 치수 내에 포함한다.
  • fill: 입력의 가로 세로 비율을 무시하고 제공된 두 치수로 늘린다.
  • inside: 종횡비를 유지하면서 이미지 크기를 지정된 크기보다 작거나 같게 유지하면서 이미지 크기를 최대한 크게 조정한다.
  • outside: 종횡비를 유지하면서 이미지 크기를 지정된 크기보다 크거나 같게 유지하면서 이미지 크기를 최대한 작게 조정한다.

<NuxtImg fit="cover" src="/nuxt-icon.png" width="200" height="100" />

 

• modifier : 표준 수정자 외에도 각 공급자에는 고유한 추가 수정자가 있을 수 있다. 이러한 수정자는 공급자에 따라 다르므로 무엇을 사용할 수 있는지 알아보려면 해당 설명서를 참조한다.
  
  modifier 속성으로 이러한 변환(수정)을 할 수 잇다.
  예)

<NuxtImg
  provider="cloudinary"
  src="/remote/nuxt-org/blog/going-full-static/main.png"
  width="300"
  height="169"
  :modifiers="{ roundCorner: '0:100' }"
/>

 

• preload : 이미지를 미리 로드하려는 경우 이 속성을 사용한다. 그러면 페이지 헤드에 해당  link 태그가 배치됩니다

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

 

• loading : 이는 뷰포트 외부에 있는 이미지 로드를 처리하는 방법에 대한 힌트를 브라우저에 제공하는 기본 속성이다. 2022년 3월 이후 모든 주요 브라우저의 최신 버전에서 지원된다.
  
  loading="lazy" 로 설정하면 뷰포트에 이미지가 나타날 때까지 이미지 로드를 연기한다 .

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

 

• nonce : 이는 콘텐츠 보안 정책에서 특정 요소에 대해 특정 가져오기를 진행할 수 있는지 여부를 결정하는 데 사용할 수 있는 암호화 nonce(한 번 사용되는 숫자)를 정의하는 기본 전역 속성이다 . nonce를 제공하면 모든  스크립트 또는 스타일을 허용 목록에 추가하는 CSP 지시어 unsafe-inline 사용을 피할 수 있다.

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

<script lang="ts" setup>
// useNonce is not provided by nuxt/image but might be
// provided by another module, for example nuxt-security
const nonce = useNonce()
</script>

 

이벤트

<NuxtImg> 및 <NuxtPicture> 컴포넌트에 포함된 img 요소가 내 보낸 기본 이벤트는 다시 내보내지고 들을 수 있다.
아래 예는 <NuxtImg> 에서 발생한 기본 onLoad 이벤트를 듣는다.

<NuxtImg
  src="/images/colors.jpg"
  width="500"
  height="500"
  @load="doSomethingOnLoad"
/>