Nextjs Image태그 관련 에러 핸들링

nextjs의 Image 태그를 사용하며 겪은 에러 핸들링에 관한 기록을 남겨보려 한다

 

1. 정적 이미지 Image src로 사용할 경우

 

Unhandled Runtime Error

Error: Failed to parse src '이미지 파일명' on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

 

 

Image 태그에 src로 들어가는 파일명이 'image.png' 이런 형식이었는데,

정적 이미지를 사용할 땐 앞에 / 표시를 붙이거나 상대적인 url이 필요하다는 에러였다.

 

기존의 Image 태그에는

<Image src={data?.image} alt='img' width={24} height={24} />

data?.image 였다면

이를 템플릿레터럴을 통해

<Image src=`/${data?.image}` alt='img' width={24} height={24} />

`/${data?.image}`로 정적 파일명 앞에 /를 붙여주어 에러를 해결하였다.

 

 

2. AWS s3 같은 외부 이미지를 Image src로 사용 할 경우

 

현 회사에서 이미지는 AWS의 s3를 이용하고 있는데,

Image src의 url은 https.. s3.ap-northeast-2.amazon.com의 형식으로 들어가게 된다

이렇게 외부의 동적 리소스를 Nextjs의 자체 Image 태그로 처리 할 경우,

next.config.js 파일에 이미지 경로를 따로 설정해줘야 한다.

 

아래 설정은 Nextsjs 공식문서에도 잘 나와있다

 

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
}

 

module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

https://nextjs.org/docs/api-reference/next/image#remote-patterns

next/image | Next.js