VsCode插件:Paste Image 实现在Markdown 中直接粘贴图片

1,926 阅读2分钟

Markdown 中直接粘贴图片

结论:在VsCode中安装 Paste Image 插件

vuepress是用markdown语法编写文章的,markdown引入图片的格式是

![这是图片](/assets/img/philly-magic-garden.jpg "Magic Gardens")

有2种引入方法,

  • 1、本地图片引入:将图片保存到本地文件夹,通过相对路径来引入(经过本人实践,再vuepress项目中使用绝对路径引入图片,图片无法正常显示);
  • 2、网络图片引入:将图片上传到服务器,获取网络地址引入

网络图片引入的方法依赖网络服务,万一服务崩溃或停服,都会导致网络图片无法访问; 本地图片引入不依赖网络,但是引入非常繁琐,需要将图片一张一张保存到项目文件夹下,再一张一张填入相对路径。当需要使用的图片很多时,工作量就非常大。

我希望能实现引用本地图片,但是又不想一张一张把图片存到项目里、一张一张填写路径,要是有什么办法能直接粘贴图片并自动填充路径就好了。

幸好,经过几番搜寻后,我找到了一个非常符合我想法的插件!VsCode里的插件 Paste Image

20230312162559.png 安装这个插件后,只要在markdown中使用 Ctrl+Alt+V,就会自动将图片保存在当前文件夹并生成对应的路径:![](img/20230312162559.png)

图片名称默认取当前时间,可以自定义名称,也可以修改保存路径

【文件——首选项——设置——搜索 Paste Image】,进行自定义,我这边修改了保存路径,存在当前文件下的img文件夹,若当前文件夹没有img,它会自动创建:

20230312163759.png

修改图片默认名称在这里:

20230312164002.png

PS:粘贴图片自动生成的路径,当前文件夹是不带./的,这样的md文件在vscode里能正常预览,但在vuepress中无法正常显示,因此需要手动添加./才能正常显示。虽然但是,还是方便很多了啊!