로드되지 않는 그림 문제 해결하기

[hajun-myoung]

문제점

일부 그림 파일들이 다음 두 가지 원인으로 인해 로드되지 않고 있음.

• vuepress1에서 vuepress2로의 fw 변경
  • img 태그에 width나 height의 attribute를 주면 이미지를 불러오지 못함.
  • 1에서는 발생하지 않았던 문제임.
  • style attribute를 이용해 width 및 height를 결정하면 해결되는 문제임.
• public assets의 사용
  • 기존 직접링크(.md파일에서 이미지 링크 문법의 사용) 대신 /docs/.vuepress/public/ 폴더를 이용함으로 인해 몇 가지 문제가 발생
  • 주로 경로를 잘못적음

발생한 문서

이미 migration을 수행하면서 많이 해결하였으나, 아직 문제가 남아있음.

• [x] 테크 /tech/pg/lang/html_css/02.md
• [x] 테크 /tech/others/google/analytics.md
• [x] 테크 /tech/others/google/search-console.md
• [x] 테크 /tech/others/vuepress/rfv-errors.md
• [x] 프로젝트 /pj/making/battery-to-wired/v1_0_0.md

그 후에 할 일

• [x] 혹시 모르니 더 로드 안되는 이미지가 없는지 모든 페이지 방문해서 점검하기

[hajun-myoung]

조금 번거로운 해결

상기한 문제들 중 두 번째 'public assets를 이용하면서 경로를 잘못 적은' 경우를 해결하기 위해 다음과 같은 과정을 거침:

• 몇 개의 파일이 .PNG 형식으로 저장되어 있음을 발견 (윈도우 캡처 기본 확장자)
• 경로를 .png로 지정해 대소문자가 달라 그림이 로딩되지 않았었음
• 경로를 .PNG로 바꿀까 하다가
• 파일 확장자가 통일되어 있는 편이 나을 것 같아 파일들 확장자를 .png로 바꿈
• 하지만 파일명의 대소문자가 바뀐 걸 깃이 트래킹하지 못함

해결

• /public/images/ 폴더를 통째로 들어내고 커밋
• 다시 올리고 커밋
• 푸시