React환경에서 이미지 경로 설정하는법

html만 공부했다면 img태그에서 이미지를 어떻게 가져오는지 알거다. 

<img src="이미지 경로" />

 

위 방식과 같이 하면 되는데 react에서 했는데 이미지가 정상적으로 로드가 안되었다. 뭐지? 싶었다.

 

일단 해결법은 아래와 같음

이미지 파일의 위치는 public폴더 아래에 있어야 함

 

왜 그러냐?

src폴더는 웹팩으로 처리되고 public 폴더는 웹팩으로 처리되지 않는다.

 

일반적으로 이미지와 같은 asset파일들은 public에 넣자.

 

여기서 한가지 더 알아야 할것은 로컬 환경과 실배포환경의 디렉토리 구조는 바뀔 수 있기 때문에 두 환경에서 모두 public폴더 위치를 지정해주는 변수가 있다. 

process.env.PUBLIC_URL

위 경로가 public폴더의 위치를 의미, 여기서 뭐 process.env.PUBLIC_URL/assets/image.png 이런식으로 이미지 src설정하면 된다.

 

https://myung-ho.tistory.com/98

[Webpack] 웹팩이란? 웹팩을 사용하는 이유

 

https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a

[React] 리액트에서 이미지 경로 설정하기 (public, src 디렉토리 차이)

 

https://stackoverflow.com/questions/34582405/react-wont-load-local-images

React won't load local images