前言

使用vscode写博客,要想便捷快速地在文章中插入图片,比较常见的一个做法是通过picgo+图床实现快捷键上传图片,并生成markdown格式的链接。图床常常是利用jsdelivr加速github仓库的方式搭建。
我原本也一直是这样做的,但自从jsdelivr在国内不可用之后,(再者,jsdelivr的使用规范也不允许作为图床使用)我换用了另一种方案,即本文所写,通过vs的pasteimage插件直接把图片粘贴在文章内,并保存在博客目录内。

效果展示

为了突出这个插件的好用,特把效果展示提到使用教程前。

首先,截张图,或者复制一张图片

然后在vscode内,使用快捷键ctrl+alt+v(可自定义)粘贴这张图片

这样就完成了,粘贴到文章内的图片会保存在你设置的目录下,粘贴图片实际上是粘贴的图片路径。图片文件以{文章标题_时间}的格式命名,十分有条理。

vscode内的实际效果↓↓↓

图片文件名↓↓↓

使用

先设情景

你使用vscode写博客,你的博客由hexo驱动,你的博客的根目录文件夹名是hexo-blog-raw,你想把粘贴的图片以文章标题_时间.png的格式命名,并保存在hexo-blog-raw/source/photo目录下

教程

首先,在vscode的扩展商店中,搜索 paste image并安装

然后,在博客根目录下,新建.vscode文件夹,用于存放vscode的工作区配置(即局部设置)

在.vscode文件夹内,新建settings.json文件,并写入以下内容并保存。(是的,配置我都帮你写好了)

{
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
    "pasteImage.path": "${projectRoot}/source/photo",
    "pasteImage.basePath": "${projectRoot}/source",
    "pasteImage.forceUnixStyleSeparator": true,
    "pasteImage.prefix": "../"
}

这样就完成了。
按照如上配置后,所有配置是只在hexo-blog-raw工作区生效的,即只有在用vscode写博客文章时,以上配置才生效。

使用时,用vscode打开博客文章,用快捷键ctrl+alt+v即可插入图片到文章内。

更多的自定义配置,可参考pasteimage官方文档