Next.js Image 컴포넌트 경로 설정하기 사용방법(이미지가 안나온다면..?)

Next.js 에서 이미지를 최적화 해주는 Image 컴포넌트!
경로가 헷갈려서 가끔 안될때가 있어 정리해보았다.

로컬기준으로 public 폴더에 image를 넣어주면 이미지 컴포넌트를 사용할경우 불러올수있다.
외부에서 불러오는 이미지는 next.config.js에 따로 설정해야 한다고 한다.



로컬에서 불러올때 두가지 방법이 있는데 Image 컴포넌트 src프로퍼티에 직접 경로를 넣어주는 방법과 import해오는 방법이 있다.
나는 루트에 public 폴더를 설정하고 그 안에 images 폴더를 만들어 주었다.

- src 에 경로 설정 (public 을 / 로 표현)

import Image from 'next/image'

export default function Home() {
  return (
        <Image src="/images/ldh.jpg"       
          layout="intrinsic"
          width={570}
          height={381}/>
  )
}

- import 해오기 (public 을 넣어주어야함)

import Image from 'next/image'
import ldh from "/public/images/ldh.jpg"

export default function Home() {
  return (

        <Image src={ldh}       
          layout="intrinsic"
          width={570}
          height={381}/>
  )
}

작업하다가 분명 경로 맞게 불러왔는데 안될때가 있어서 시간 날린적 있었는데,, 알고보니 src프로퍼티에 이미지 경로를 불러와줄때는 public없이 / 로 표현해줘야하고 import 로 불러올때는 public를 넣어주어야 했다. 이미지가 많아지면 일일이 import하는게 번거로울 수 있다고 판단하여 주로 src에 경로를 직접 넣어주는 편이다




* Image 컴포넌트 옵션 * 



1.  intrinsic

원래 크키를 유지하는 옵션. css로 따지면 이미지에 max-width 넣어주는 거라고 생각하면 된다

import Image from 'next/image'

export default function Home() {
  return (
    <main>
      <h1>intrinsic</h1>
      <div style={{
          maxWidth:'1000px',
          background:"pink",
          marginBottom:"20px"                  
          }}>
        <Image src="/images/ldh.jpg"       
          layout="intrinsic"
          width={570} //이미지 원본크기
          height={381}/>
      </div>
    </main>
   )
 }

 

2.  fill

컨테이너의 width,height 에 맞춰서 이미지가 늘어나는 옵션.
컨테이너에 position: relative 를 넣어주어야 컨테이너에 맞게 늘어난다. 또한 objectFit 옵션을 사용할 수 있다.
css 로 생각하면 이미지가 absolute된 상태이고 objectFit 을 사용할경우 cover, contain 값을 사용하여 컨테이너 내에 이미지 크기를 조절가능하다

import Image from 'next/image'

export default function Home() {
  return (
    <main>
      <h1>fill</h1>
      <div style={{
          maxWidth:'800px',
          height:'400px',
          position:'relative',
          background:"pink",
          marginBottom:"20px"
          }}>
        <Image src="/images/ldh.jpg" layout='fill' objectFit="cover"/>
      </div>
    </main>
   )
 }

 

3. fixed

이미지가 설정한 width height 에 맞게 fix된 상태.

import Image from 'next/image'

export default function Home() {
  return (
    <main>
      <h1>fixed</h1>
      <div style={{
        background:"pink",
        marginBottom:"20px"              
          }}>
        <Image src="/images/ldh.jpg"       
          layout="fixed"
          width={1000}
          height={581}/>
      </div>
    </main>
   )
 }

 

4. responsive

컨테이너에 맞게 이미지가 유동적으로 커졌다가 줄어들었다가 하는 옵션.
css로 따지면 이미지가 width: 100% 설정되어 있는 느낌.

import Image from 'next/image'

export default function Home() {
  return (
    <main>
      <h1>responsive</h1>
      <div style={{
          maxWidth:'1000px',
          background:"pink",
          marginBottom:"20px"                   
          }}>
        <Image src="/images/ldh.jpg"       
          layout="responsive"
          width={570}
          height={381}/>
      </div>
    </main>
   )
 }