解决Vscode编写的md文件上传至CSDN时图片无法转存

最新推荐文章于 2023-12-25 14:55:14 发布

weixin_40642404

最新推荐文章于 2023-12-25 14:55:14 发布

阅读量343

点赞数

分类专栏： markdown vscode 文章标签： vscode github

本文链接：https://blog.csdn.net/weixin_40642404/article/details/130751108

版权

markdown 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vscode

1 篇文章 0 订阅

订阅专栏

说明

用以解决已经用VsCode编辑好的MD文件导入csdn时，本地的图片链接失效的问题

前言

说来惭愧，因为以前完全没有过做笔记的习惯，最近开始学着写点笔记啥的，用VsCode写了两份MD文件，但导入到CSDN的时候,MD文件里的本地图片链接就会生效，CSDN会有如下图的提示

这个可以理解，是因为本地的路径，CSDN无法访问。所以就开始找解决方案，但是一搜markdown上传CSDN的本地图片转链接的办法，都只有Typora配合图床的，VsCode的极少。还有就是使用图床写出的md文件，链接直接是图床链接，那么即使在本地查看，一会有一些延迟，会影响体验，我想达到的效果是在本地则使用本地连接，然后可以一键转为图床链接以上传CSDN等平台。在多番尝试后，终于是找到一个还算满意的解决方案，由此记录一下，万一有跟我一样需求的，可以参考一下。

用到的程序

PicGo 命令行版
(命令行版，用以上传图片至图床)
VsCode插件Paste Image
(用以粘贴图片到md文件，也可以是其他图片粘贴工具)
VsCode插件: Markdown Image Manage
(用以配合PicGo实现本地图片上传并更新图片链接)

具体流程

下载安装PicGo命令行

1.PicGo依赖于node.js，直接在Node.js官网下载选择自己适合的版本（大于12）安装即可。安装完在命令行输node -v 和npm -v验证一下安装是否成功，出现类似如下的结果则表示安装完成。

2.命令行执行npm install picgo -g安装PicGo,同理，命令行输入picgo -v，有输出则安装成功

配置github图床

1.创建github仓库

2.获取token
点击右上角头像选择Settings，在左侧栏的最下方选择Developer settings

在Developer settings页面，点击Personal access tokens，选择Tokens (classic)，再点击Generate new token，选择Generate new token (classic)。

添加token介绍及期限等

生成token，记得妥善保管，之后你将无法查看它的具体字符串值，但丢了也没事，重新创建就是

配置picgo

因为常用的picgo都是Gui的，命令行的比较少,其实也跟Gui的差不多
1.在命令行输入picgo set uploader，之后选择github

2.根据提示设置仓库名，格式为"github用户名/仓库名"，设置分支名，默认main就行。然后是token，注意token的输入是隐藏的所以看不到，输入后回车就行，之后设置存储路径，也就是在你git仓库里图片的存放路径。设置自定义域名，自定义域名可以写git链接,格式为：https://raw.githubusercontent.com/用户名/仓库名/分支名,
也可以写成CDN链接，可以提高国内访问速度格式为：https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名

3.如果填写错了，或者想查看，修改当前配置可以打开%USERPROFILE%/.picgo/目录下的config.json文件操作。

4.配置检查无误后可以使用命令picgo upload /xxx/xx/xx.jpg测试一下，出现success就表示成功了（失败了看一下token设置是否有误等，还有token不能被其他程序使用过，不知道为什么，最好是用新token）

安装及使用Markdown Image Manage

直接在VsCode扩展里搜索安装就行，安装完会自动关联picgo，默认配置就可以使用。记得重启VsCode。
安装后在md文件编辑页面全选内容，之后右键，弹出的菜单栏里会多于一个图片管理，（在这之前最好先给Md文件起一个英文名，原因会在后文说明）选择图片管理->MIM:上传所选图片，会总动上传选择范围内的所有图片上传，并自动更新链接。后边有增加则再次上传即可，对于已上传的图片会过滤掉的。

在实际应用时，发现CSDN一个问题，CSDN无法识别带有中文的图片链接，而Markdown Image Manage插件在上传图床时，会自动为当前md文件创建一个同名文件夹并把属于该md文件的图片上传到此文件夹下，所以生成的图片链接也会带有当前md文件的文件名，而如果是中文的md文件名，产生的链接会有中文，即便使用了url转码，csdn也还是会拉取错误，而且也尝试了换用gitee的链接，有中文依然不行，csdn是真的拉跨。所以目前对图床等不熟练的我能想到的解决方法只有先写好md文件后另存为一个英文名的文件，对该英文名的md文件进行上传操作，把该文件上传到csdn就可以删除了，本地留存中文名的即可。

附：如何支持gitee图床

可能会有习惯于使用gitee，或者觉得github国内访问卡的。所以在这里讲一下picgo命令行版如何配置gitee图床的操作。
安装picgo-plugin-gitee-uploader插件，注意不是picgo-plugin-gitee
命令行输入指令picgo install picgo-plugin-gitee-uploader出现success即可。如果不小心装成了picgo-plugin-gitee(笔者就不小心装错了，后边输命令总是出现Error)，可以使用 picgo rm picgo-plugin-gitee卸载。
安装过上述插件后，再执行picgo set uploader一直向下，就可以看到已经有了gitee选项了。