# Display pictures correctly in Typora and Hugo


<!--more-->

## 背景 

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

## 目标 

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

## 配置 Typora 

Typora 有两个选项需要配置：

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

### 指定图片根路径 

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

![image-20210923221325847](/images/2021-09-23-在Typora和Hugo中正确显示图片/image-20210923221325847.png)

### 设置图片自动存放路径 

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

![image-20210923221749069](/images/2021-09-23-在Typora和Hugo中正确显示图片/image-20210923221749069.png)

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

![image-20210923222112469](/images/2021-09-23-在Typora和Hugo中正确显示图片/image-20210923222112469.png)

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

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

## 参考 

- [Images in Typora](https://support.typora.io/Images/)