[React] react에서 local image file 불러오기

[문제점]

 react에서는 웹링크로 이미지 url을 한 경우에는 정상적으로 보이지만, 다음과 같이 일반적인 경로를 사용하여서 local에 저장되어있는 image를 불어오면 정상적으로 보이지 않는다. 이러한 문제를 해결하기 위한 방법으로는 총 3가지가 있다.

 

<img src="./img/imgUrl.png" alt="image" />

 

---

 

1. Public folder 사용하기

 

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

public 폴더 안에 이미지를 저장하는 img 폴더를 만든 뒤에 이미지들이 해당 폴더 안에 모두 저장한다. 그러면 절대경로를 사용하여서 이미지를 불러올 수 있다.

 

2. import 사용하기

 

import imgfile from './imgfile.png';
<img src={imgfile} />

 

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

 

3. require 사용하기

 

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

두번째는 require을 사용하는 방법으로 import와 같이 src폴더 안에서만 사용이 가능하다. 구글링을 해보니 이러한 3가지 사용방법들이 있다고 하였다. 한 프로젝트에서는 1번 방법으로 이미지를 불러오는 식으로 사용하였다. 하지만 이상하게도 다른 프로젝트에서는 1,2,3번 방법 모두 사용해보아도 이미지가 불러와지지 않았다. require()함수에 default를 붙이니 문제가 해결되었다.

 

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

default를 붙이지 않고 require만 사용하면 이미지가 아닌 객체가 return 되기 때문이다.