[Vite+React] 깃허브 페이지 배포 이미지 경로 에러

개인 페이지를 만들던 도중 Vite를 사용해서 개발, build하고

깃헙 페이지로 배포하는 도중, 일부 이미지가 뜨지 않는 에러 발생

 

이는 경로 문제인데, 이미지를 사용할 때 import 하는 방식을 써서 그랬다.

src로 경로를 직접 입력해줘야 성공적으로 배포가 된다.

public/images/ 폴더에 이미지를 저장했는데,

아래 두가지 방법으로 경로를 수정하면 에러가 해결된다.

 

1. 경로 맨 앞에 /를 붙여주기

ex) ./images/

2. 경로 앞에 깃허브 페이지 주소를 붙여주기

[배포한 깃헙 페이지 주소]/images/

 

예시