[next.js] Image컴포넌트

 

<Image/>

이미지 컴퍼넌트를 사용하게 되면 주소가 바뀌고 이미지 원본을 바로쓰는게아니라 next.js 서버를 한번 거쳐서 최적화된 크기의 이미지를 가져옴

 

1. 이미지 크기를 알아서 최적화 해줌

2. lazy 로딩을 지원해서 페이지 로딩 속도도 최적화 해줌

(next.js에는 loading 속성이 적용되어있음, <img loading='lazy'>)

 

ex)

1. Image 컴포넌트를 사용하면 width와 height 속성을 적용해줘야한다

(이미지가 public폴더에 있으면 절대 경로로 지정해준다)

import topImage from '@/public/image.jpg';


<div>
  <Image width={500} height={500} src={topImage} /> 
  //import 한 이미지는 width,height 속성 없으면 이미지 크기로 적용됨(에러안뜸)
</div>


<div>
  <Image width={500} height={500} src="/image.jpg" />
  //직접 절대경로로 이미지 넣으면 width,height 없으면 에러 뜸
</div>

 

 

2. fill 속성을 사용하면 부모 요소에 꽉차도록 이미지가 적용된다

(주의: fill은 부모요소가 포지셔닝 된것만 적용됨)

<div style={{ position: "relative", width: "300px", height: "300px" }}>
  <Image fill src="/image.jpg" />
</div>

 

3. object-fit: cover 속성을 사용해서 브라우저를 줄이거나 늘렸을 때 이미지 비율이 깨지지 않게 막을 수 있다

<h2>1번</h2>
<div style={{ position: "relative", width: "100%", height: "500px" }}>
  <Image fill src="/image.jpg" style={{ objectFit: "cover" }} />
</div>
<h2>2번</h2>
<div>
  <Image width={500} height={500} src={topImage} />
</div>