在Typora和Hugo中正确显示图片

背景

Typora 可以便捷地将文件保存在本地，但是如果不合理配置，无法适应静态网页生成器（如：Hugo）的静态文件存储方式。所以需要通过 Typora 强大的配置方式解决这个问题。

目标

将文件存放在项目目录中的 static/images 目录下，同时保证能在 Typora 和 Hugo 生成的网站中可见。

配置 Typora

Typora 有两个选项需要配置：

1. 图片读取的根路径。通过指定这个参数，可以使图片文件以绝对路径的方式在 Markdown 文件中显示，从而适配生成网站中图片的 URL。
2. 图片的自动存放路径。

指定图片根路径

依次点击Format->Image-> Use Image Root Path，选择 hugo项目的static 目录作为根路径。

设置图片自动存放路径

在设置（File->Preferences）中选择 Image 栏，将 static/images` 的绝对路径设置为图片插入地址。

也可以通过语法加入图片子目录，更好地管理图片。

经过如上配置，截图便可通过 command+v 自动保存在 static/images 目录中。

Hugo 默认读取的路径为 static，符合要求。此时拉起站点，就可以正常显示图片了！

参考

• Images in Typora