1 min to read
지킬 블로그 이미지 경로 디버그.
이미지 표시 불능을 해결해보자.
지킬 블로그 이미지 표시 문제 해결
안타깝게도 이 테마의 개발자가 미리 설정해둔 경로와 내가 쓰고자 하는 이미지파일의 경로가 맞지 않는 듯하다. 고로 two posts column 에 표시되는 optimized image가 제대로 출력되지 않는 상황이 생겼다.
문제 원인 파악하기
문제의 이미지 경로를 찾아야 할 필요가 있다.
(F12)를 눌러 보든가 아니면 마우스 우클릭 -> inspect 버튼을 클릭해 크롬 개발자 도구를 열고 문제가 있는 이미지 경로를 수색한다.
표시된 경로와 다르게 마우스 버튼을 올려보면 실제 경로가 나타난다.
위와 같이 경로 중간에 해당 포스트 경로가 삽입되어 있음을 발견했다.
하지만 나는 포스트 md 파일과 이미지를 같은 폴더에 두고 싶지 않기 때문에 이미지는 assets/img/~~ 에 따로 보관하기로 한 것이 경로 오류를 일으키고 있는 것이다.
문제 해결 시작하기
- 문제 해결을 위해선 문제가 발생한 지점을 찾아내야 한다.
- 문제적 이미지 경로는 클래스
<h2>See also</h2>밑에 있다. - 그러므로
_layout -> post.html에서See also를 수색하자.
See also를 찾았으면 이미지 출력문인<img src = blarblar>를 찾는다.post.url뒤에 이미지 경로가 따라오고 있기 때문에 올바른 경로가 아니다. 절대 경로를 사용하면 이런 문제가 없지만 상대경로에서는 이런 문제가 생긴다.- 고로 아래와 같이 앞에
Site baseURL을 추가해 경로를 수정한다.
- 로컬호스트를 새로고침하면 이미지가 올바르게 표시된다.
- 이번에는 아래와 같이 Footer 이미지가 제대로 뜨지 않는다.
- 같은 방식으로 개발자 도구에서 이미지 경로를 확인한다.
- 클래스
recommendation을 찾아 같은 이슈를 확인했다.
- 아래와 같이 경로를 수정한다.
- 수정된 경로 이미지 출력을 확인한다.
