[Next.js] <img> 기본태그에서 이미지가 안 불러와지는 경우 Next.js의 <Image> 태그 사용하여 문제 해결하기

✏️ 한 줄 설명

동아리 홈페이지를 React+Next.js+schadcn/ui 를 이용해 개발중인데, Card content에 넣은 이미지가 불러와지지 않는 문제를 next.js의 Image 태그로 해결한 이야기를 기록해본다

 

 

 

문제 상황

Next.js + shadcn/ui 를 이용해서 개발중인데, card 컴포넌트 사용시 card contents에서 이미지가 안 불러와지는 오류가 발생했다

 

코드를 살펴보자

 

1.우선 이렇게 코드 맨 위에 이미지를 import 했다

 

2.그리고 카드 배열을 만들었다

 

3.마지막으로 Card 컴포넌트의 CardContent 부분에 img 태그로 scr={card}로 붙여넣었다

 

그럼 문제가 뭐였는지 자세히 살펴보자

 

 

트러블 슈팅

문제는 이미지가 StaticImageData 타입이라 과 HTML상 이미지 태그(string)과 불일치했기 때문에 발생했다

 

이미지를 import할 때 StaticImageData 타입으로 가져오게 된다.

하지만, <img> 태그의 src 속성은 문자열 타입을 필요로 하기 때문에 내가 사진(png, jpeg, jpeg, 등등)을 넣었을 때 타입 불일치 문제가 발생한 것이다

 

Next.js 공식문서 image태그에 관한 내용

을 읽어보면 src는 문자열로 받는 것을 알 수 있다

 

또한 이미지 최적화에 관한 내용도 이 공식 문서에서 찾아볼 수 있었다

 

 

해결 방법

위 문서들을 바탕으로 두가지 해결 방법이 나온다

 

1.경로 문자열 사용

 

이미지를 import하지 않고, 경로 문자열을 직접 사용하여 <img> 태그에 넣는 방법이다.

이 방법은 간단하지만, Next.js의 이미지 최적화 기능을 사용할 수 없다

 

만약 기존코드가 아래와 같다면

import reviewCardKprintf from "../../../public/images/review/reviewCardKprintf.jpeg";
import reviewCardMTandTrip from ...
//나머지 이미지들 import

  

const cards = [
reviewCardBuildwithAI,
reviewCardDanggn,
//나머지 이미지들
];

 

아래와 같아 import 과정을 생략하고 바로 객체에 넣는 식으로 코드를 변경한다

const cards = [ 
'/images/review/reviewCardBuildwithAI.jpg', '/images/review/reviewCardDanggn.jpg', 
// 나머지 이미지 경로들 
];

 

위 방법은 편하지만, 이미지 최적화 기능(링크)을 사용하지 못한다

 

2.이미지 최적화를 할 수 있는 Next.js Image 컴포넌트 사용

 

Image 컴포넌트를 사용하면, StaticImageData 타입을 바로 사용할 수 있다(=import를 해도 된다)

또한 이미지 최적화 기능도 사용할 수 있다

 

아래가 <img> 태그를 사용한 기존 코드라면

<div key={index} className="review-card"> 
	<img src={card} alt={`Review Card ${index + 1}`} /> 
</div>

 

아래처럼 <Image> 태그를 사용한다

 

<div key={index} className="review-card"> 
	<Image src={card} alt={`Review Card ${index + 1}`} /> 
</div>

 

나는 해결 방법 2를 따르기로 했다

첫번째로 협업하는 사람이 <Image> 태그를 사용했기 때문에, 나도 같은 방식으로 이미지를 넣어 코드 컨벤션을 맞추기 위함이고,

두번째로 <Image> 태그를 사용하면 이미지 최적화에 용이하기 때문이다

 

Image 태그로 문제 해결하기

먼저 next/image에서 Image 컴포넌트를 import 한다

import Image from 'next/image';

 

 

그리고 <img> 태그에서 <Image> 태그로 변경한다

 

<CardContent className="flex aspect-square items-center justify-center space-x-[16px] ">
	<Image src={card} alt={`Review Card ${index + 1}`} className="w-full h-full object-cover rounded-[22px]" />
</CardContent>

 

그러면 아래와 같이 사진이 잘 나오는 것을 확인할 수 있다