阅前须知
注意!
测试使用的方案最终是失败的,不想看过程就别点了
前言
这是遇到的一个实际问题,在 GitHub, 掘金社区,微信公众号都有账号,每次写文章时,都需要单独添加图片,图片路径,图片名称等等,非常麻烦,例如在掘金社区中写的文章,图片自动上传的掘金服务器,然后同样的文章复制在微信公众号中,只能复制文本等内容,图片就上传失败了,需要单独再把文章中失败的图片重新手动处理一下,因为日常编码用 VSCode 比较多,想到的一个方式是,在 VSCode 中,写 Markdown 文档,可以添加图片使用插件等方式自动转成网络图床路径图片,这样写好的文章不仅直接上传到 GitHub 中,还能把文档上传到掘金平台或者复制到微信公众号中,省得重复处理图片
VSCode默认添加图片方式
操作在 Windows11 系统中执行
在 VSCode 中,写 Markdown 文档,可以添加图片,添加截图等等,下面介绍几种添加图片的方法
添加本地图片
本地图片粘贴
Ctrl + C 复制图片,在编辑区,直接粘贴 Ctrl + V 即可,这时候的路径会自动转化,例如在 C盘中的图库中的图片,复制后,在编辑区粘贴,图片会自动生成到当前 md 文件所在的文件夹下,路径会自动转化成  格式


本地图片拖拽
在编辑区,将图片拖拽到编辑区,图片会自动生成到当前 md 文件所在文件夹下,路径会自动转化成  ,操作方式为按住 Shift 键的同时将图片拖入编辑器
添加截图
例如微信快捷键截图 ,Alt + A 截图,截好图后,在编辑区,按 Ctrl + V 粘贴,就会生成对应的图片地址,接好的图会自动保存到当前 md 文件所在文件夹下,路径会自动转化成 

使用插件将图片添加图床服务
GitHub 图床
默认添加的图片,路径会自动转化成  格式,但是图片会保存在当前 md 文件所在文件夹下,如果要上传到 GitHub,或者其他平台,图片路径会丢失,我这里使用 Markdown Image 插件
配置Github图床服务
-
GitHub中创建一个新的公开仓库,并添加一个README.md文件,保证main主分支存在 -
点击
GitHub头像,进入Settings > Developer settings > Personal access tokens > Tokens (classic)
-
点击
Generate new token,选择Classic token,添加Note描述,设置Expiration为No expiration -
勾选
repo,点击Generate token
莫名其妙这样了,刷新重试后,就看到 token 了
- 复制
token保存, 注意!!!token只会显示一次
Markdown Image 插件配置
在 VSCode 中,进入设置。在搜索框中输入 markdown image
设置插件的 Upload Method 为 GitHub
点 GitHub设置 跳转到 GitHub 的设置页面
输入 GitHub 的 path, token, repository, branch 等参数
配置完成后,重启,按理来说应该就可以在 VSCode 中使用 Markdown Image 插件上传图片到图床了
然而,我本地做的测试并没有反应,我尝试截图,和说拽图片的方式,都是只保存到本地,没有上传到图床
再次检查 VSCode 中的 Markdown Image 插件设置和 GitHub 的仓库,以及 token 的设置,都正常,就是无法上传到仓库中