[Today I Learned] react에서 image 파일 불러오는 법

tsconfig.json 파일에서 경로 별칭을 할 수있다.
어느 페이지에서든간에 import 해올때 @/를 하면 src폴더 내에서 부터 파일을 찾을 수 있다.

"paths": {
      "@/*": ["./src/*"]
    }

1. 기본 불러오기

<img src="@/assets/imgfile.png"/>

2. import 사용하기

import imgfile from './imgfile.png';

<img src={imgfile} />

import를 하여서 이미지를 불러오는 방법이다.

3. require 사용하기

<img src={require("./imgfile.png").default}/>

require 를 사용하는 방법으로 import와 같이 src폴더 안에서만 사용이 가능 하다.
default를 붙이지 않고 require만 사용하면 이미지가 아닌 객체가 return 된다.
require사용시에는 default를 붙이자.

사용예시

<img
src={require(`@/assets/CityImage/${index + 1}.jpg`).default}
></img>