React - 프로젝트에서 이미지 경로 찾기

관리 폴더

public 폴더

• webpack에 의해 관리됨
• PUBLIC_URL 환경변수를 통해 접근 폴더 접근가능
• 파일 못찾으면 컴파일에러 없이 파일 깨짐

<img src={`${process.env.PUBLIC_URL}/파일명`}/>

src 폴더

• webpack에 의해 관리됨 (import하여 사용가능)
• 파일 못찾으면 컴파일 에러 발생

import logo from "경로";
<img src={logo} />

• require로 불러오기 가능

<img src={require('경로').default} />

 

 

추가 팁

VS code는 jsconfig.json로 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작가능

index.html 위치한 곳에 jsconfig.json 파일을 생성해준다.

아래와 같이 작성해주면 경로 입력시 src 경로를 기본디렉토리로 하여 찾아준다.  

{
  "rootDir": "src",
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["*"]
    }
  }
}

 

동작방식 설명

baseUrl : 기준디렉토리 → 상대경로가 아닐때 이 디렉토리부터 탐색
paths : {
  alias경로: [실제절대경로], → alias경로 입력시 실제절대경로로 변환
}

상대경로가 아니라는 말은
../../../경로명 → 이런 경우가 아니라
Components/경로명... → 이렇게 주어진 경우를 뜻함
이걸 기준디렉토리/Components/경로명... 이렇게 해석하겠다는 뜻.

paths : {
  "Image/*": ["./src/image/*"], → src안쓰고 Image만 썼을때 ./src/image로 인식
}