Skip to content

vscode paste image插件设置

Paste Image插件的教程

vscode编辑md文件的时候,如果想插入图片,自带的粘贴只会粘贴到当前目录下,也没有文件重命名,很不友好。

在扩展商店里面有mushanPaste Image插件,相比自带的,更加友好一点。

首先是 安装这个插件,然后进入插件设置

2025-05-25-19-21-50.png

注意:该插件的粘贴图片快捷键是CTRL+ALT+V

图片文件配置项

设置项作用示例配置说明
Base Path基础目录$该项相当于粘贴文件的时候,应该把什么目录视作工作目录,最终图片路径会以这个path来计算相对路径;currentFileDir就是当前工作区文件的路径,所以不需要修改这个配置。
Default Name图片文件名Y-MM-DD-HH-mm-ss粘贴后的图片文件名,可以根据当前时间格式化命名。注意这里不要添加其他非格式化项,不然容易命令出错。
Name Prefix图片文件名前缀留空该项是图片文件名的前缀,比如设置为image-,则粘贴的图片文件名前面会带上image-;
Name Suffix图片文件名后缀留空该项是图片文件名的后缀,设置效果同上。(文件名后缀是在文件扩展名之前的)
Path图片文件保存位置$图片文件会保存的目录,根据你的需要修改;
Prefix最终文件路径的前缀留空最终文件路径的前缀,建议设置为./;
Suffix最终文件路径后缀留空最终文件路径的后缀,不建议添加值,否则会因为扩展名被覆盖而影响解析;

根据我的需要,我需要将图片粘贴到工作区所在目录下的img路径中,那么我就需要修改Path和Prefix两个配置项

设置项作用配置示例
Path图片文件保存位置${projectRoot}/docs/img/2025
Prefix最终文件路径的前缀../../
Base Path基础目录${projectRoot}/docs
Insert Pattern插入模式![{imageFilePath}$
Default Name图片文件名Y-MM-DD-HH-mm-ss

如果你不设置Prefix,最终粘贴的图片路径如下

plaintext
![](img/image-20240124161634.png)

对于绝大部分markdown软件,这个路径都能被正常识别为相对路径并访问到图片。但是对于我正在使用的vuepress框架而言,必须将图片路径添加上./他才能识别出来

plaintext
![](./img/image-20240124160742.png)
最近更新