map 함수 사용 중 이미지 경로 에러

더미데이터 사용 중에 img 파일을 불러오기 위해 <img src={require( ... )} /> 문에 이미지 파일 경로를 넣었는데 에러가 났다.

{props.product.map((item, index) => (
	<SwiperSlide key={index}>
		<ProductPreView img={require(item.img)} ... />
	</SwiperSlide>
))}

더미데이터의 이미지 경로는 현재 '../../assets/images/product-1.png' 방식으로 되어있다. 그러나 webpack은 변수 값을 알기 위해 프로그램 분석을 하지 않기 때문에 변수 이름을 require 인수로 전달할 수 없다. 따라서 인수가 변수(item.img)인 경우에 이에 대한 정보(경로)를 알 수 없기 때문에 로드되지 않는다.
따라서 표현식을 통해 경로를 올바르게 제공해야 일부 정보를 추출할 수 있다.
예를 들어

require('./template/' + name + '.png');

이런 식으로 쪼갠 표현식을 통해 전달할 수 있다.

참고 사이트
https://webpack.js.org/guides/dependency-management/#require-with-expression
https://stackoverflow.com/questions/62110521/how-to-map-images-in-reactjs
https://stackoverflow.com/questions/62091386/how-to-render-images-from-an-array-using-the-map-method/62095265#62095265