CRA 배포할 때 public img가 뜨지 않는 문제

리액트 프로젝트를 gh-pages로 배포했는데 public에 넣어둔 이미지가 제대로 작동하지 않았다.
알고보니 배포한 뒤 페이지에서 img src를 제대로 알려면 PUBLIC_URL 환경변수를 같이 써넣어줘야 한다.

상대 주소말고 절대 주소로 써줘야 한다는 의미!

process.env.PUBLIC_URL을 포함한 주소를 사용해야 한다.

생각해보면 당연한 건데 몰랐다 😅

• 오류난 코드

function App(){
  return <img src="/images/self.png" alt="self" />;
}

• 수정한 코드

function App(){
  return <img src={process.env.PUBLIC_URL + '/images/self.png'} alt="self" />;
}

React 공식 문서