이미지 참조

요약

Obsidian과 Hugo는 각각 이미지 참조 방식에 차이가 있어 호환성 문제가 발생할 수 있습니다. 이를 해결하기 위해 Obsidian의 설정을 변경하고, 이미지 링크를 수정하는 방법을 사용할 수 있습니다. Templater 플러그인을 활용하면 링크 수정을 자동화할 수 있으며, Hugo의 static 폴더에 이미지를 저장하여 경로 문제를 해결할 수 있습니다.

호환되지 않는 이유

Obsidian의 이미지 참조 방식

Obsidian은 내부 링크와 이미지 포함을 고유한 형식으로 처리합니다.

  • 이미지를 추가할 때 기본적으로 다음과 같은 형식으로 추가됩니다.
![[Pasted image 20240608165739.png]]
  • 일반적인 마크다운 형식으로도 참조 가능합니다.

Hugo의 이미지 참조 방식

Hugo는 정적 사이트 생성기로, 일반적인 마크다운 형식으로 이미지를 참조합니다. Hugo에서는 다음과 같은 형식을 사용합니다

![image](resources/image_2020240608165739.png)

이미지는 보통 static 폴더에 저장되며, 마크다운 파일 내에서 해당 경로를 사용하여 이미지를 참조합니다.

호환 방법

Obsidian 설정 변경

Obsidian에서 이미지를 특정 폴더에 저장하도록 설정할 수 있습니다. 이를 통해 Hugo와의 호환성을 높일 수 있습니다.

이미지 링크 수정

Obsidian에서 이미지를 추가한 후, 링크를 일반적인 마크다운 형식으로 수정합니다.

  • 공백이 있으면 안됩니다.
![image_20240608165739](Resources/image_20240608165739.png)

스크립트를 이용한 일괄 변경

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" 부분을 클릭합니다. 이동된 주소가 이미지의 위치와 다르다면, 주소 참조 방식을 변경해야 합니다. 만, 간단하게 절대 주소 참조 방식으로 변경합니다.

수정 방법

  • `/node_modules/@hyas/images/layouts/_default/_markup/render-image.html’ 파일을 수정합니다.
{{ $renderHookName := "image" }}
{{ $minHugoVersion := "0.114.0" }}
{{ if lt hugo.Version $minHugoVersion }}
  {{ errorf "The %q render hook requires Hugo v%s or later." $renderHookName $minHugoVersion }}
{{ end }}
{{ $errorLevel := or site.Params.render_hooks.image.errorLevel "ignore" | lower }}
{{ if not (in (slice "ignore" "warning" "error") $errorLevel) }}
  {{ errorf "The %q render hook is misconfigured. The errorLevel %q is invalid. Please check your site configuration." $renderHookName $errorLevel }}
{{ end }}
{{ $contentPath := "" }}
{{ with .Page.File }}
  {{ $contentPath = .Path }}
{{ else }}
  {{ $contentPath = .Path }}
{{ end }}
{{ $u := urls.Parse .Destination }}
{{ $msg := printf "The %q render hook was unable to resolve the destination %q in %s" $renderHookName $u.String $contentPath }}
{{ $r := "" }}
{{ if $u.IsAbs }}
  {{ with resources.GetRemote $u.String }}
    {{ with .Err }}
      {{ if eq $errorLevel "warning" }}
        {{ warnf "%s. See %s" . $contentPath }}
      {{ else if eq $errorLevel "error" }}
        {{ errorf "%s. See %s" . $contentPath }}
      {{ end }}
    {{ else }}
      {{ $r = . }}
    {{ end }}
  {{ else }}
    {{ if eq $errorLevel "warning" }}
      {{ warnf $msg }}
    {{ else if eq $errorLevel "error" }}
      {{ errorf $msg }}
    {{ end }}
  {{ end }}
{{ else }}
  {{ with .Page.Resources.Get (strings.TrimPrefix "./" $u.Path) }}
    {{ $r = . }}
  {{ else }}
    {{ with (and (ne .Page.BundleType "leaf") (.Page.CurrentSection.Resources.Get (strings.TrimPrefix "./" $u.Path))) }}
      {{ $r = . }}
    {{ else }}
      {{ with resources.Get (printf "resources/%s" $u.Path) }}
        {{ $r = . }}
      {{ else }}
        {{ if eq $errorLevel "warning" }}
          {{ warnf $msg }}
        {{ else if eq $errorLevel "error" }}
          {{ errorf $msg }}
        {{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}
{{ if $r }}
  {{ $id := printf "h-rh-i-%d" .Ordinal }}
  {{ with .Attributes.id }}
    {{ $id = . }}
  {{ end }}
  {{ if ne $r.MediaType.SubType "gif" }}
    {{ $r = $r.Resize (printf "%dx%d webp" $r.Width $r.Height) }}
  {{ end }}
  <img
    src="{{ $r.RelPermalink | absURL }}"
    width="{{ string $r.Width }}"
    height="{{ string $r.Height }}"
    decoding="{{ site.Params.hyas_images.defaults.decoding }}"
    fetchpriority="{{ site.Params.hyas_images.defaults.fetchpriority }}"
    loading="{{ site.Params.hyas_images.defaults.loading }}"
    alt="{{ .PlainText }}"
    {{ with .Title }}title="{{ . }}"{{ end }}
    id="{{ $id }}"
  />
{{ else }}
  <img
    src="{{ .Destination | absURL }}"
    alt="{{ .PlainText }}"
    {{ with .Title }}title="{{ . }}"{{ end }}
  />
  {{ warnf "Image not found: %s" .Destination }}
{{ end }}

수정된 내용은 다음과 같습니다.

  • 이미지 참조 경로를 절대주소로 변경합니다.
  • 참조 실패 시 에러메세지를 출력합니다.

참고

브라우저 캐시 지우기

브라우저 캐시에 의해 수정된 내용이 바로 반영되지 않을 수 있습니다. 변경 후에도 동일한 문제가 발생한다면 브라우저 캐시를 지우고 페이지를 다시 로드합니다.