이미지의 동적 경로 : require()

1️⃣ 문제 상황

포트폴리오의 테크스택에 하나하나 이미지를 넣으려고 경로를 사용하는데 src에 import를 해서 변수넣는 방식을 잘만 되던 녀석이 백틱으로 동적경로를 넣으니까 이미지가 로드되지 않았다. 왜 그런가 하고 구글링 후 답을 찾았다.

2️⃣ 문제 이유

간단히 말하면 require()를 쓰지 않았기 때문이다. 동적경로에 require함수로 감싸주고 문제를 해결하였다.

const imageSrc = 
	require(`@/app/assets/svg/${content.toLocaleLowerCase()}.svg`);
<Image
	src={imageSrc}
	alt={content}
	width={30}
	height={30}
/>

3️⃣ require함수를 왜 써야하는가

src에 백틱을 사용해서 동적으로 경로를 불러올 경우, 해당 경로를 string으로만 인식을 한다. 따라서 string을 data-url로 변경해주는 require()을 사용함으로써 이미지를 불러올 수 있는 것이다.