vscode使用PasteImage插入图片

vscode使用PasteImage插入图片

需求

在vscode中写Markdown文件，经常需要插入图片，使用插件Paste Image进行简单配置后，就可以方便插入图片并自动存放到相应路径的文件夹中

安装及配置

安装

• 从扩展商店搜索Paste Image并安装即可

配置

• vscode设置中搜索Paste Image，找到Paste Image: Configuration
  

配置项Paste Image: Path

• 配置项中，Paste Image: Path设置图片存放的路径，${currentFileDir}/assets/${currentFileNameWithoutExt}含义是当前文件夹/assets/无后缀名的当前文件名
• 使用快捷键Ctrl+Alt+V即可将图片存放到相应路径的文件夹中，文件夹不存在会自动创建。
• 粘贴之后Markdown文档会自动插入图片相对路径。

![](assets/vscode使用PasteImage插入图片/blog-20240418105520.png)

:::tip 说明
我并没有将所有图片都放在一个文件夹下，而是放在Markdown文件所在文件夹的assets文件夹下并且按照文件名进行分类，这样方便之后文档存放的目录层级有变动，只需要把文档和图片文件夹一起移动即可，不需要修改Markdown文件中的图片相对路径。
:::

配置项Paste Image: Name Prefix

• 配置项中，Paste Image: Name Prefix设置图片文件名前缀，我修改为blog-,这样图片文件名前缀为blog-，例如blog-20240418105520.png

配置项Paste Image: Default Name

另外还设定了Paste Image: Default Name为YMMDDHHmmss,这样图片文件名默认为当前时间，例如blog-20240418105520.png

目录结构

• 粘贴之后图片存放目录结构如下

docs
├─tools
│  │─assets
│  │   └─vscode使用PasteImage插入图片
│  │        └─blog-20240418105520.png
│  └─vscode使用PasteImage插入图片.md

其他

对上面三个配置修改后，对于我使用已经很方便了，另外还有一些其他配置项，感兴趣可以再尝试一些