PEANUT996

如何在Hugo和Obisdian正确预览图片

使用绝对路径

由于Hugo不支持相对路径,所以需要在根目录下创建一个专门的文件夹用于存放图片,这里选择创建images文件夹。 位置: $site/images

Hugo

# config.toml

[module]
  [[module.mounts]]
      source = 'images'
      target = 'static/images'

# 如果启用了hugomods/images的话, 则要改为下面的写法
[module]
  [[module.imports]]
      path = 'github.com/hugomods/images'
  [[module.mounts]]
      source = 'images'
      target = 'assets/images'

假如此时有一张图片pic.png, 那么在markdown中只需要如此编写即可在hugo中正确预览:

![图片](/images/pic.png)

Obsidian

此时的obsidian已经能够正确预览图片。 如果想要在粘贴的时候,文件能够正确出现到对应的位置,那么打开设置:

  • 修改附件存放路径 - images
  • 内部链接类型 - 基于仓库根目录的绝对路径

需要注意的是,每次在粘贴文件还需要手动在obsidian创建的链接中添加/, hugo中才能正确预览图片

存在的问题

在尝试去除md图片链接的/时,遇到了问题

启用github.com/hugomods/images模块之后,如果文件在static/images目录下那么只需要使用![图片](images/pic.png)即可正常访问

但是对于mounts产生的static/images目录时,无法正确生成对应的resources, 官方文档也提到了这一点:

Limitations

Most of the processing methods work only on site and page image resources, except for alignment and resizing. However, the resizing is implemented by inline styles for static (public) and external images.

推荐的做法也就是将static映射到assets, 但是对于开启了github.com/hugomods/images模块后,assets下的图片访问目录也还是![图片](/images/pic.png) 也就回到了原点,依然无法解决当前的问题。