[React] Create React App 이미지 경로

CRA 4.0 버전부터 권장하는 asset 폴더의 위치가 public 폴더에서 src 폴더로 이동하였습니다.

src 폴더 (권장)

설정

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    ...
  },
  "include": [
    "src"
  ]
}

해당 설정 후 서버가 실행되어있었다면, 수정 후 재실행해야합니다.

img

<img src={require('images/logo.svg').default} alt="Logo" />

background-image

div {
  background-image: url("images/logo.svg");
}

public 폴더

img

<!-- HTML -->
<img src="%PUBLIC_URL%/images/logo.svg" alt="Logo">

<!-- JSX, TSX -->
<img src={`${process.env.PUBLIC_URL}/images/logo.svg`} alt="Logo" />

background-image

<!-- HTML -->
<div style="background-image: url('%PUBLIC_URL%/images/logo.svg');" />

<!-- JSX, TSX -->
<div style={{backgroundImage: `url(${process.env.PUBLIC_URL}/images/logo.svg)`}} />