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" />;
}Author And Source
이 문제에 관하여(CRA 배포할 때 public img가 뜨지 않는 문제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heony/CRA-deploy-public-img-error저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
