[Next.js] 이미지 불러오기

🖇️ Static Assets

Next.js는 이미지와 같은 정적 파일을 루트 디렉터리의 public 이라는 폴더 아래에 제공할 수 있다. 그러면 기본 URL(/)에서 시작하는 코드에서 public 내부의 파일을 참조할 수 있다.

예를 들어, public/avatars/me.png 파일은 /avatars/me.png 경로로 이동하여 볼 수 있다. 해당 이미지를 표시하는 코드는 다음과 같다.

import Image from 'next/image'
 
export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}
 
export function AvatarOfMe() {
  return <Avatar id="me" alt="A portrait of me" />
}

✅ Next.js에서 이미지 파일 제대로 불러오기!

1. Next.js의 루트 디렉토리에 public 이라는 이름의 폴더 생성
2. public 폴더 안에 불러오려고 하는 이미지 파일 넣기
3. / 경로를 통해 public 폴더 안에 저장된 파일에 접근해서 이미지 불러오기
   폴더구조가 아래와 같은 경우 <img src="/images/example.jpg" alt="Example" /> 이렇게 불러오면 됨!

my-next-app/
├── public/
│   └── images/
│       └── example.jpg
├── pages/
│   └── index.js
└── ...

👩🏻‍💻 참고자료

• Static Assets