[React] Public 폴더 이미지 절대경로 설정하기

프로젝트 파일마다 Public 미디어 파일의 경로가 달라 매번 잦은 실수를 반복하곤 하는데요. 이를 간단히 해결하는 방법이 있습니다. 바로 상대경로로 쓰여진 주소를 절대경로로 바꿔주는 것입니다. index.html에서와 js파일에서 쓰는 방식이 조금 달라서 아래 예시를 보고 그대로 따라하시면 되겠습니다.

index.html

%PUBLIC_URL%/파일명

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

js

process.env.PUBLIC_URL/파일명

<img src={process.env.PUBLIC_URL + '/logo192.png'} alt="main background" width="50%" />

 

참고문서

https://create-react-app.dev/docs/using-the-public-folder/

Using the Public Folder | Create React App