hexo配置vscode自动保存markdown图片

发表于 更新于 分类于 ， 阅读次数： Waline：

为什么要配置自动保存图片？

当我们写博客的时候，或多或少需要进行配图，这个时候可以将图片上传图床或者直接
保存到服务器上进行引用，因为免费图床经过长时间的保存后图片可能会被清理，所以这里我选择了把图片直接保存到服务器上。

下载插件

首先，下载vscode的插件 Paste Image

下载完成后，我们可以先实验下，截屏一张图片到剪切板之后，使用ctrl+alt+v进行粘贴。

可以看到，插件自动帮我们生成了md语法的图片链接，同时在当前目录下生成了这个png文件。

但是现在还有一个问题，图片应该要保存到images文件夹中去，因此我们下一步是进行插件的配置。

插件配置

首先，我的项目结构如下。

我想将所有图像保存在blog/source/img，并将图像 url 插入文章。所以图片 url 应该是../images/xxx.png。

blog
-- source
---- _post (存放md文档)
---- images (存放图片)

此时，我的插件配置文件如下(这里推荐使用工作区配置，不影响其他的地方)

"settings": {
	"pasteImage.basePath": "${projectRoot}/source/_post", 
	"pasteImage.path": "${projectRoot}/source/images",
	"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
	"pasteImage.defaultName": "HHmmss"
}

  • pasteImage.basePath: 这个是根路径

  • pasteImage.path: 这个是文件的保存路径

  • pasteImage.namePrefix: 这个是附加在图片名称前的字符串，我配置的是当前的文件名

  • pasteImage.defaultName: “HHmmss”这个是文件的名称，HHmmss代表当前时间的小时/分/秒

配置完成后，让我们粘贴一张图看看

可以看到，markdown中的路径变成了

![](../images/2022-05-23-hexo配置vscode自动保存markdown图片_010236.png)

同时在images中生成了对应的png