Next/Image(2)

Local Image

이전에 말한, preLoading 을 사용하기 위해서는 local image 와 remote image 의 차이를 알아야 합니다.

next.js 폴더 안에 존재하는 이미지가 local image 이고, api 로 호출하는 이미지가 remote image 입니다.

local image인 경우, next.js 가 어떤 이미지인지 알고 있기 때문에, 인터넷이 느린경우 위와 같은 pre loading 이 가능합니다.

<Image src={imgSrc} placeholder="blur"/>

Remote Image

API로 가져오는 이미지인 경우 가장 먼저 next.config.js 에 다음과 같은 코드를 추가해 줘야 합니다.

const nextConfig = {
  ...,
  images: {
    domains: ["your.domain.com"],
  },
};

그런다음, Image 테그에 가로길이와 세로길이를 알려주어야 합니다.
실제 이미지의 크기가 아니라, 이미지를 몇x몇 의 크기로 렌더링 할 지를 알려주어야 합니다.

 <Image
    width={46}
    height={46}
    src={"https://sumini.dev/static/23c6a21b34eaca00c98dae5e2e36fcad/47498/nextjs.jpg"}
/>

왜냐하면, 이미지가 실제로 로딩되기 전에 그 공간을 비워두어야 하기 때문입니다.

하지만, width 와 height 가 고정값이 아닌 경우도 있습니다.

---

layout

이럴 때 사용할 수 있는 것이 layout fill 입니다.
layout fill 을 사용하면, Image 테그에 width 와 height 를 주지 않아도 작동합니다. layout fill 은 object-fit 과 자주 함께 쓰이며, 마치 background 처럼 사용할 수 있습니다.