github 배포후 이미지 안보이는 경우

배포후 이미지가 안뜨는 경우가 있다.

 

문제 코드

const frontStacks = [
  { name: 'HTML5', img: './assets/images/html.jpg' },
  { name: 'CSS3', img: './assets/images/css.jpg' },
  { name: 'JavaScript', img: './assets/images/js.jpg' },
  { name: 'TypeScript', img: './assets/images/ts.jpg' },
  { name: 'React', img: './assets/images/react.jpg' },
  { name: 'Styled-Components', img: './assets/images/style.jpg' },
  { name: 'Recoil', img: './assets/images/recoil.jpg' },
];

 

현재 코드는 개발 환경에선 정상적으로 작동할수있으나 배포후 이미지가 안뜨는 문제가 생길수도 있다.

 

---

 

#해결방법

 

1. 상대 경로 대신 절대 경로 사용하기

깃허브 pages로 배포된 프로젝트의 경로에 리포지토리 이름이 포함되기때문에 절대 경로를 사용해야된다.

const frontStacks = [
  { name: 'HTML5', img: '/repository-name/assets/images/html.jpg' },
  { name: 'CSS3', img: '/repository-name/assets/images/css.jpg' },
];

 

repository-name을 본인 리포지토리 이름으로 변경

 

---

 

2. React 환경에서 PUBLIC_URL 사용하기

React로 개발 중일때 process.env.PUBLIC_URL을 활용해 경로를 동적으로 설정할 수 있다.

const frontStacks = [
  { name: 'HTML5', img: `${process.env.PUBLIC_URL}/assets/images/html.jpg` },
  { name: 'CSS3', img: `${process.env.PUBLIC_URL}/assets/images/css.jpg` },
];

 

React에서 PUBLIC_URL은 자동으로 현재 프로젝트의 배포 경로를 기준으로 설정되므로 경로 문제를 방지할 수 있다.