[Next/image] Next 활용하기 + 전역변수 src 설정 에러 해결과정

Next에서는 image를 사용할 수 있는 코드가 따로 있다! 

 

 

Error: Failed to parse src "@public/img/common/logo/logo.svg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

 

 

Next/image 가이드대로 이미지를 첨부했는데 이런 에러가 났다. 전역으로 설정해놓은 @public 경로를 사용했는데 전역변수는 @로 핸들링 되는거 아니엿나? 했는데  / 로 시작하는 path를 입력해 달라고 뜨길래 @public 을 삭제하니 정상 작동했다.

 

 

 

👉 잘못된 경로설정 src

 <Image
  src="@public/img/common/logo/logo.svg"
  alt="Picture of the author"
  width={500}
  height={500}
/>

 

 

👉 정상작동된 경로설정 src

<Image
  src="/img/common/logo/logo.svg"
  alt="Picture of the author"
  width={500}
  height={500}
/>

 

 

 

 

😇  Next/image 는 제공되는 아이템들이 많으니 정독해도 좋을 듯 하다! 

 

next/image | Next.js