[Tailwind CSS] nextjs is missing required "width" property & Error: Invalid src prop "" on `next/image`

오늘은 Tailwind CSS를 사용해 이미지를 삽입하며 만난 두 가지 에러와 해결 방법을 살펴보자.

 

심리 테스트 item에 썸네일 이미지를 넣었고, 이미지는 외부에서 가져온 것을 사용하였다.

심리테스트 썸네일 이미지

Tailwind의 image를 삽입할 때 <img> 태그가 아닌 nextjs에서 제공하는 'Image'를 사용한다.

처음에는 Styled-Componenents를 사용했던 때와 같이 <img> 태그를 사용하여 코드를 짰더니, VSCode에서 nextjs에서 제공하는 'Image'를 사용하라고 warning이 떴다.

참고) Image 컴포넌트는 사용자 경험을 향상 시켜주고 이미지 형식 최적화, 외부에 저장되어 있는 이미지 리사이징까지 다양한 장점을 가지고 있다고 한다.

그래서 오키 알겠다~ 하고 바꿔주었더니, 이런 에러를 만나게 되었다.

1. 첫 번째 에러

nextjs is missing required "width" property.

Image 컴포넌트를 사용할 경우 width, height는 꼭 지정해주어야 한다.

<Image src={image} alt={title} width={400} height={300} />

width, height를 지정해주고 나서 또 에러를 마주치게 되었다. 

2. 두 번째 에러 

Error: Invalid src prop "" on `next/image`

Tailwind에서 외부 이미지 경로를 사용할 때는 next.config.js에서 domains 설정을 해야 한다.

next.config.js에 다음과 같은 내용을 추가해주면 된다.

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["a.cdn-hotels.com"], // 에러에서 hostname 다음 따옴표에 오는 링크를 적는다.
  },
};

 

참고한 블로그)

https://velog.io/@eunnbi/NextJS-Image-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

[NextJS] Image 컴포넌트