이미지 import없이 경로 설정하기

import catUrl from "./images/cat.png" // src 폴더 하위의 이미지 경로 import

function Thumbnail() {
  return <img className="thumbnail" src={catUrl} alt="cat"></img>;
}

보통은 위와 같은 코드로 이미지파일 링크를 통해 import하여 변수에 저장하고 src안에 해당 변수를 링크로 넣는 방식으로 이미지 파일을 불러와서 사용한다.

 

극히 일부인 이번 프로젝트 이미지 파일들

하지만 이번 프로젝트에 들어가는 이미지가 너무 많아서 매번 import하기가 힘들어 방법을 찾아보았다.

 

모든 이미지파일을 React 프로젝트 생성하면 자동생성되는 public 폴더 내에 img 폴더를 만들어서 그 안에 이미지 파일을 저장하면 

<>
    {isMentor ? (
      <Image src="/img/adventureduck.png" />
    ) : (
      <Image src="/img/cloud_ori.png" />
    )}
</>

이런식으로 ../../로 상위 폴더로 찾으러 갈 필요없이 /img/~~~.png만으로 바로 해당 이미지에 접근할 수 있다.