Github: 깨진 이미지 경로를 수정하는 방법

페이지를 Github에 배포하려고 하는데 모든 것이 업로드된 후 갑자기 이미지가 표시되지 않습니까?
많은 사람들이 이 문제에 직면합니다!

Scrimba 디스코드 커뮤니티의 활동적인 회원으로서 저는 많은 초보자들이 처음에 페이지를 배포할 때 어려움을 겪는 것을 보았습니다. 그래서 더 많은 사람들이 코드 문제를 해결하는 방법을 배우는 데 도움이 되기를 바라며 이 글을 쓰고 있습니다.

이 문제를 단계별로 해결하는 방법을 보여주기 위해 index.html, style.css 및 cat.jpg로 구성된 폴더를 만들었습니다.
See Live Page
See Github Repository

다음 두 가지를 확인해야 합니다.

Github 리포지토리에서 이미지 위치

HTML/CSS 코드

Github 리포지토리의 구조에 따라 파일 경로가 다시 작동하도록 HTML/CSS 코드를 조정해야 합니다.

파일 위치 사례 시나리오

하나의 폴더에 있는 모든 파일

여기에서 모든 파일이 함께 있어 형제임을 알 수 있습니다.
이 경우 이미지 태그는 다음과 같아야 합니다.

 <img src="cat.jpg" alt="Kitty">

다른 폴더의 이미지 파일

종종 이미지는 별도의 폴더에 있으며 이미지 경로는 다르게 구성되어야 합니다.


여기에서 images 폴더는 index.html과 style.css의 형제입니다. 그러나 cat.jpg는 이미지 폴더의 하위입니다.

이 경우 이미지 태그는 다음과 같아야 합니다.

<img src="images/cat.jpg" alt="">

HTML/CSS에서 inspector을 사용하는 것이 좋습니다. 이렇게 하면 커밋하지 않고도 이미지 경로를 확인하고 변경할 수 있습니다(단, 올바른 솔루션을 찾은 후에는 코드를 편집해야 합니다!).



그리고 그게 다야!
즐거운 코딩하세요!

추가 유용한 링크:

Inspect Element: How to Temporarily Edit Any Webpage Zapier.com 제공

GitHub Pages Tutorial Happycoding.io 제작