[React] Prop으로 이미지의 주소값을 넘길 때 오류

1. 오류상황

맞는 이미지의 상대주소값을 계속 넣어주었음에도 에러가 났다...

const SlideItem = ({ id, url, alt }) => {
  console.log(url) // ../../res/imgs/slice_001.png
  return (
    <>
      <p>{id}</p>
      <img src={url} alt={alt} />
    </>
  );
};

2-1. 첫 번째 해결방법

원래 img를 import 해서 받아오는게 제일 편하지만, 각 prop에 대해 처리를 해야하기 때문에 주소값으로 밖에 해결하지 못했다. 구글링을 해보니 require 메소드를 함께 활용하라고 하였다.

const SlideItem = ({ id, url, alt }) => {
  console.log(url) // ../../res/imgs/slice_001.png
  return (
    <>
      <p>{id}</p>
      <img src={require(url)} alt={alt} />
    </>
  );
};

그래도 계속 Cannot find module '../../res/imgs/slide_003.png' 에러가 출몰하였다....

2-2. 두 번째 해결방법 (성공!)

url을 다 받아오는게 아니라, template literal 방법을 이용해 끝부분의 쿼리만 교체해준다.

const SlideItem = ({ id, url, alt }) => {
  console.log(url) // slice_001.png
  return (
    <>
      <p>{id}</p>
      <img src={require(`../../res/imgs/${url}`)} alt={alt} />
    </>
  );
};

갑분 성공!! require 메소드는 absolute path string이 필요하다고 한다. 그래서 트릭으로 앞에 ""를 붙이고 시작하는 방법도 있는 듯 한데, 실패하였고 다음과 같은 방법으로 성공하였다.

정리 : 곧바로 url로 받아오면 안되나보다...require에 쿼리값을 변경해 전달하고 싶으면 무조건 template literal 형태일 것...기억