Image

Image

 

next.js에서 제공하는 이미지 최적화 컴포너트

 

Image 컴포넌트

 

이미지를 최적화하여 사용하는 컴포넌트

import Image from "next/image"

const Product = () => {

  return(
   <>
     <Image 
       width={100}
       height={100}
       src="/Images/Product.png"
       alt="상품 이미지" />
   </>
 )
}

 

1. Image 컴포넌트는 width, height 말고도 fill 이라는 속성으로 크기를 지정할 수 있다. fill은 포지셔닝이 된 부모요소를 기준으로 크기가 정해진다

2. src 속성은 public 폴더를 기준으로 상대 경로를 적는다

public 폴더 외부에 있는 이미지 파일을 사용할 때

1. next.config 파일의 nextConfig 객체에 Image 프로퍼티를 수정하거나 추가한다