如何在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)
也就回到了原点,依然无法解决当前的问题。