使用VSCode编辑时插入图片

起因

起因其实是hexo-asset-image这个插件多年无人维护，npm弹出警告，而替代品hexo-asset-img实测有bug，生成博客报错。

在折腾了一圈各种方法无果之后（大多数方法能正常生成博客，但vscode编辑时无法预览图片），柳岸花明，发现vscode已经原生支持Ctrl+V粘贴图片和文件，同时可以自定义文件粘贴的路径。

VSCode关于此项功能的官方文档地址：

inserting-images-and-links-to-files

实现

将_config.yml中的自动生成文章同名文件夹的选项关闭

 post_asset_folder: false

在博客根目录的source文件夹下新建文件夹img用于存放图片。

打开vscode设置，选择workspace设置，搜索markdown。

找到markdown > Copy Files ：Destination，点击Add Item，添加的对应的键值如下（需要根据自己的目录结构和自定义页面自行修改）：

 "/source/_posts/**/**/*": 
 "${documentWorkspaceFolder}/source/img/${documentBaseName}-${fileName}"
 ​
 "/source/about/*": 
 "${documentWorkspaceFolder}/source/img/about-${fileName}"
 ​
 "/source/cross/*": 
 "${documentWorkspaceFolder}/source/img/cross-${fileName}"
 ​
 "/source/**/*": 
 "${documentWorkspaceFolder}/source/img/pages-${fileName}"

附：我的博客目录结构如下。

 ├─source
 │  ├─about
 │  ├─cross
 │  ├─img
 │  └─_posts
 │      ├─year
 │      │  ├─month

完成

使用这种方法可以在编辑时预览图片，同时博客内图片也可以正常显示。

同时，使用这种方式不需要安装任何的vscode插件及nodejs插件，且可以直接通过默认的Ctrl+V粘贴，不需要使用额外的快捷键。