[Github 배포 에러] Github 배포시 이미지 경로 에러 해결

참고

https://blog.naver.com/PostView.naver?blogId=psw9058&logNo=222400270672

 

에러

내가 만든 프로젝트를 github pages에 올렸다. 그런데 이미지가 엑박으로 뜨는게 아닌가..🤔

(로컬에서 테스트할때는 이상없이 잘 나왔음)

 

원인

어떤 이미지는 나오는데, 어떤 이미지는 아예 안나온다. 이유가 뭐지?하며 구글링하던 찰나..

이번 이슈로 나는 한 가지를 알게 되었다. github pages에서 폴더를 인식하는 방법이 다르다는 것을..!

 

Github 관점에서 폴더구조 이해하기❗

내가 작업한 프로젝트 폴더 구조다. 여기서 index.html 파일과 다른 파일들이 같은 위치에 있는 images폴더를 가르켜야 에러가 안난다.

./ -> 현재 폴더
../ -> 상위 폴더
../../ -> 상위 폴더의 상위 폴더

 

이 관점에서 다시 돌아보면

내가 처음에 쓴 코드는 github pages에서 "/images/" 루트 디렉토리를 가르켜서 이미지가 나올 수 없던 것이었다. (github pages 루트 디렉토리인 https://username.github.io/  를 가리키게 됨)

시도해본 결과 "./를 경로 앞에 붙이거나 or 그냥 폴더이름(images/) or 절대경로" 로 설정하니 이미지가 잘 나왔다.

 

해결

절대경로 사용
<img src="https://내깃헙아이디.github.io/레포지토리명/파일이름.확장자명"/>

<li class="swiper-slide">
  <img src="https://zisuzin.github.io/shoopen/images/main/front/pc_1.jpg" alt="배너이미지1">
</li>

 

나는 위의 절대경로로 바꿔주니 이미지가 다시 잘 나왔다!🤩