Problem Description
- gh-pages 배포는 문제 없이 동작, 이미지 외에 나머지 렌더링은 문제 없음
- styled-components를 이용해 public 폴더에 저장한 이미지를 background-image 속성으로 참조한 경우
- public 폴더의 이미지 렌더링 시 파일을 찾지 못하는 문제
Root Cause
// issued
const Background = styled.div`
width: 100vw;
height: 100vh;
background-image: url(/main-background.jpg);
`
// solved
const Background = styled.div`
width: 100vw;
height: 100vh;
background-image: url(${process.env.PUBLIC_URL}/main-background.jpg);
`Console error message를 확인해보면 https://user.github.io/image.jpg 에서 이미지 파일을 찾고 있다는 것을 알았다.
gh-pages로 호스팅할 경우 루트 디렉토리가 https://user.github.io/repository 가 되어야 하지만, issued case의 경우 시스템의 루트 디렉토리에 /repository 서브 디렉토리가 추가 되지 못해 올바르지 않은 경로에서 이미지를 참조하려다 생기는 문제였다.
Solution
pakage.json에 이미 homepage 속성을 https://user.github.io/repository 로 추가해 놓은 상태에서, 위의 solved case 처럼 background-image url에 ${process.env.PUBLIC_URL} 이라는 환경 변수를 추가해주어 제대로 된 경로를 찾아갈 수 있도록 변경해주었다.
eunji yang