이미지 참조 호환성 개선
요약
Obsidian과 Hugo는 각각 이미지 참조 방식에 차이가 있어 호환성 문제가 발생할 수 있습니다. 이를 해결하기 위해 Obsidian의 설정을 변경하고, 이미지 링크를 수정하는 방법을 사용할 수 있습니다. Templater 플러그인을 활용하면 링크 수정을 자동화할 수 있으며, Hugo의 static 폴더에 이미지를 저장하여 경로 문제를 해결할 수 있습니다.
호환되지 않는 이유
Obsidian의 이미지 참조 방식
Obsidian은 내부 링크와 이미지 포함을 고유한 형식으로 처리합니다.
- 이미지를 추가할 때 기본적으로 다음과 같은 형식으로 추가됩니다.
![[Pasted image 20240608165739.png]]Hugo의 이미지 참조 방식
Hugo는 정적 사이트 생성기로, 일반적인 마크다운 형식으로 이미지를 참조합니다. Hugo에서는 다음과 같은 형식을 사용합니다.
이미지는 보통 static 폴더에 저장되며, 마크다운 파일 내에서 해당 경로를 사용하여 이미지를 참조합니다.
호환 방법
Obsidian 설정 변경
Obsidian에서 이미지를 특정 폴더에 저장하도록 설정할 수 있습니다. 이를 통해 Hugo와의 호환성을 높일 수 있습니다.
이미지 링크 수정
Obsidian에서 이미지를 추가한 후, 링크를 일반적인 마크다운 형식으로 수정합니다.
- 공백이 있으면 안됩니다.
Templater 플러그인을 이용한 변경 자동화
이 작업은 수동으로 수행해야 하지만, Templater 플러그인을 사용하여 자동화할 수 있습니다. 다만, 이 방식은 참조용이고, 스크립트를 통해 진행 할 예정입니다.
스크립트를 이용한 일괄 변경
이미지가 보이지 않는 경우 점검 사항
로컬 서버 URL 확인
브라우저에서 http://localhost:1313/Resources/docflow.png 경로로 접근해 이미지가 표시되는지 확인합니다.
표시되지 않는다면 public/Resouces 폴더에서 dockflow.png 파일이 있는지 확인합니다.
마운트 방식을 사용한 경우, 파일이 없다면 마운트 설정을 확인해봅니다.
마운트 확인
[[mounts]]
source = "../DocFlow/Resources"
target = "static/Resources"- 위 코드는 프로젝트 폴더와 동일한 계층에 있는
dockFlow/Resources폴더를 프로젝트 폴더의static폴더로 마운트 시킵니다. - 빌드를 진행하면
static폴더의 내용이Public/Resources폴더로 복사 됩니다.
페이지 소스 링크 확인
확인 방법
이미지가 보이지 않는 페이지에서 마우스를 우클릭하고 페이지 소스 보기를 선택합니다.
ctrl + F 키를 입력하고, docflow.png 를 검색합니다.
<img
src="resources/docflow.png"
alt="DockFlow"
/>위와 같이 보인다면 상대주소로 설정이 되어 있는 것이며, 상대주소 참조 방식에 따라 이미지 참조가 되지 않을 수 있습니다.
src="Resources/docflow.png" 부분을 클릭합니다.
이동된 주소가 이미지의 위치와 다르다면, 주소 참조 방식을 변경해야 합니다.
참고
브라우저 캐시 지우기
브라우저 캐시에 의해 수정된 내용이 바로 반영되지 않을 수 있습니다. 변경 후에도 동일한 문제가 발생한다면 브라우저 캐시를 지우고 페이지를 다시 로드합니다.
Buy me a coffee