📦 如何将 Markdown 中的本地图片一键转为 GitHub 在线图片

Wo_jack
0 阅读5分钟

📦 如何将 Markdown 中的本地图片一键转为 GitHub 在线图片

告别手动上传！用 Typora + PicGo 实现本地图片秒变外链，写博客从此不再为图片发愁。

📌 目录

  1. 为什么需要图床？
  2. 方案简介
  3. 第一步：安装 PicGo
  4. 第二步：创建 GitHub 图床仓库
  5. 第三步：配置 PicGo
  6. 第四步：配置 Typora
  7. 第五步：一键上传所有图片
  8. 常见问题解决
  9. 总结

为什么需要图床？

问题场景

  • 你在 Typora 中写了一篇图文并茂的博客
  • 文章中插入了大量本地截图（路径如 C:\Users\xxx\图片.png）
  • 发布到 CSDN、知乎、博客园等平台时，图片全部裂了

类似于这种

img

原因

这些平台访问不到你电脑上的本地路径。你需要让图片有一个 公网可访问的地址。

图床的作用

图床就是“图片的云存储”，把图片上传到云端，生成一个 HTTP 链接，任何平台都能访问。

方案简介

工具链

工具作用
TyporaMarkdown 编辑器，支持图片上传功能
PicGo图片上传工具，自动将图片上传到图床
GitHub免费的图床，存储图片
jsDelivr免费 CDN，加速图片访问

最终效果

操作前：

markdown

![截图](C:\Users\Lenovo\Pictures\screenshot.png)

操作后：

markdown

![截图](https://cdn.jsdelivr.net/gh/你的用户名/仓库名/screenshot.png)

只需要在 Typora 中点击一个按钮，所有本地图片自动变成在线链接。

第一步：安装 PicGo

1.1 下载 PicGo

访问 GitHub 发布页： github.com/Molunerfinn…

选择对应系统的安装包：

  • Windows：PicGo-Setup-2.4.0-beta.7-x64.exe
  • macOS：PicGo-2.4.0-beta.7-mac.dmg

1.2 安装 PicGo

双击安装，一路下一步。安装完成后打开 PicGo，界面如下：

image-20260322174421261

第二步：创建 GitHub 图床仓库

2.1 创建仓库

  1. 登录 GitHub
  2. 点击右上角 + → New repository

2.2 填写仓库信息

字段填写内容说明
Repository namemy-images仓库名，可自定义
Description图床仓库描述，可选
Public / Private✅ Public必须公开，否则图片无法外链

点击 Create repository 完成创建。

2.3 生成 GitHub Token

  1. 点击右上角头像 → Settings
  1. 左侧菜单最底部 → Developer settings
  1. 点击 Personal access tokens → Tokens (classic)
  1. 点击 Generate new token (classic)

  1. 填写信息：

    • Note：PicGo 图床
    • Expiration：选 No expiration（或 90 天）
    • 权限：勾选 repo（全部 repo 权限）
  1. 点击 Generate token
  2. ⚠️ 立即复制并保存！ 只显示一次，关闭后无法再查看

第三步：配置 PicGo

3.1 安装 GitHub 插件（可选）

PicGo 默认支持 GitHub 图床，无需安装额外插件。

3.2 配置 GitHub 图床

  1. 打开 PicGo
  2. 点击左侧 图床设置 → GitHub
  1. 填写以下信息：
字段填写内容示例
设定仓库名用户名/仓库名你的仓库名/my-images
设定分支名分支名main（注意：GitHub 新仓库默认是 main）
设定 Token刚才复制的 tokenghp_xxxxxxxxxxxx
指定存储路径可选，如 images/留空则放根目录
设定自定义域名CDN 加速地址https://cdn.jsdelivr.net/gh/你的仓库名/my-images
  1. 点击 确定 保存
  2. 点击 设为默认图床

3.3 测试上传

在 PicGo 上传区拖入一张测试图片，上传成功后相册会显示：

https://cdn.jsdelivr.net/gh/你的仓库名/my-images/upload-success.png

右键复制链接，格式应为：

text

https://cdn.jsdelivr.net/gh/你的仓库名/my-images/测试图片.png

在浏览器打开链接，能显示图片即配置成功。

第四步：配置 Typora

4.1 打开偏好设置

Typora 菜单栏 → 文件 → 偏好设置（或按 Ctrl + ,）

4.2 配置图像设置

cdn.jsdelivr.net/gh/你的仓库名/my-images/typora-preferences.png

配置项选择
插入图片时选择 上传图片
上传服务选择 PicGo(app)
PicGo 路径点击右侧文件夹，找到 PicGo.exe

PicGo 常见路径：

  • Windows：C:\Program Files\PicGo\PicGo.exe
  • 或 C:\Users\用户名\AppData\Local\Programs\PicGo\PicGo.exe

4.3 验证配置

点击 验证图片上传选项，会弹出测试窗口，提示成功即配置完成。

https://cdn.jsdelivr.net/gh/你的仓库名/my-images/verify-success.png

第五步：一键上传所有图片

5.1 打开你的 Markdown 文档

在 Typora 中打开写好的文章，里面可能有很多本地图片：

markdown

# 我的博客
​
![图片1](C:\Users\Lenovo\Pictures\1.png)
![图片2](C:\Users\Lenovo\Pictures\2.png)
![图片3](C:\Users\Lenovo\Pictures\3.png)

5.2 一键上传

点击菜单栏 格式 → 图像 → 上传所有本地图片

https://cdn.jsdelivr.net/gh/你的仓库名/my-images/upload-all.png

5.3 等待上传完成

Typora 会：

  1. 扫描文档中所有本地图片
  2. 调用 PicGo 逐一上传到 GitHub
  3. 将文档中的图片路径替换为 CDN 链接

上传前：

markdown

![图片](C:\Users\Lenovo\Pictures\1.png)

上传后：

markdown

![图片](https://cdn.jsdelivr.net/gh/你的仓库名/my-images/1.png)

5.4 发布文章

全选（Ctrl + A）→ 复制（Ctrl + C）→ 粘贴到 CSDN/知乎/博客园 → 发布！

常见问题解决

Q1：上传失败，提示 404

原因：仓库名或分支名填写错误

解决：

  • 仓库名格式：用户名/仓库名（不要带 .git）
  • 分支名：新仓库是 main，不是 master

Q2：上传失败，提示 401

原因：Token 无效或权限不足

解决：重新生成 Token，确保勾选 repo 权限

Q3：图片无法在 CSDN 显示

原因：CSDN 无法访问 GitHub 或 CDN

解决：

  • 在 CSDN 编辑器中，点击 一键转存 图片
  • 或直接用 CSDN 自己的图床上传

Q4：Typora 提示“请先在偏好设置中设置图片上传服务”

解决：按第四步配置 PicGo 路径，并点击 验证图片上传选项

Q5：部分图片上传失败

原因：

  • 图片文件名含中文
  • 单张图片过大（>50MB）
  • 网络波动

解决：

  1. 把文件名改成英文
  2. 压缩图片
  3. 在 PicGo 相册中点击重试

总结

配置清单

步骤内容
1安装 PicGo
2创建 GitHub 公开仓库
3生成 GitHub Token
4配置 PicGo GitHub 图床
5配置 Typora 图片上传
6一键上传所有本地图片

最终效果

以后在 Typora 中写文章：

  • 直接拖入或粘贴图片
  • 图片自动上传到 GitHub
  • 文章直接复制到任何平台，图片都能显示

💡 写在最后

配置图床可能花你 10 分钟，但以后每次写博客都能省下 10 分钟。一次配置，终身受益。

如果觉得有用，请点赞收藏支持一下～ ❤️

本文所有图片均通过 Typora + PicGo + GitHub 一键上传

avatar
文章
阅读
粉丝