解决Markdown笔记图片失效问题：Gitee+PicGo图床搭建全攻略

Ne0inhk

— 12 min read
解决Markdown笔记图片失效问题：Gitee+PicGo图床搭建全攻略

引言：为什么要解决搭建图床？

你是否遇到过这样的场景：

  • 用 Obsidian 写了半年的知识库，换电脑时发现 所有图片都变成 “破碎图标”；
  • 把 Markdown 笔记分享给同事，对方打开后 图片全是本地路径，根本看不到内容；
  • 尝试用云盘链接替代，却因为 “防盗链” 或 “链接过期”，图片还是无法正常显示……

本地 Markdown 笔记的 “图片依赖本地路径”，是困扰无数创作者的痛点。而解决这个问题的核心，就是搭建一个 “图床” —— 把图片托管到云端，让链接永远有效。

本文将带你用 “Gitee（国内免费仓库）+ PicGo（自动上传工具）+ Node.js（运行环境）” 搭建图床，不仅解决 “图片失效”，还能实现：

  • ✔️ 国内访问快：Gitee 服务器在国内，无需科学上网，图片秒加载；
  • ✔️ 完全免费：Gitee 仓库、PicGo、Node.js 均为开源免费工具；
  • ✔️ 无缝对接 Obsidian：写笔记时 “拖入图片自动上传”，全程无感知；

从 工具原理解析 到 Step by Step 实操（包括环境搭建、插件配置、异常排查），甚至帮你避过 90% 的踩坑点。无论你是笔记爱好者，还是专业创作者，都能通过这篇文章彻底解决 “图片链接失效” 的心病。

（下文将从概念扫盲开始，逐步拆解每一步配置，确保 “0 基础也能跟做”。）

文章目录

一、概念扫盲：为什么需要这些工具？

在开始操作前，先搞懂四个核心概念，避免 “盲目操作”：

1. 图床：图片的 “云端仓库”

  • 定义：专门用来存储图片的云端平台，核心是 生成 “永久可访问的图片 URL”（如 https://gitee.com/xxx.png）。
  • 类比：把图片当成 “货物”，图床就是 “网络仓库”，随时能通过链接提取货物（图片）。
  • 解决的痛：
    • 本地笔记里的 ![示例](./images/pic.png)，换电脑、分享给别人时，链接必然失效；
    • 图床的链接是 “云端地址”，在哪台设备打开都能访问，彻底摆脱 “路径依赖”。

2. Gitee：国内版 “代码托管平台”（选它当图床的理由）

  • 定义：类似 GitHub，但服务器在国内，是 免费的代码 / 文件托管平台，可以理解为 “中国的 GitHub”。
  • 为什么选 Gitee 当图床？
    • ✅ 访问快：国内节点，不用科学上网，图片加载秒开；
    • ✅ 免费开源：创建 “开源仓库” 后，图片可被公开访问（非开源仓库的图片无法外链）；
    • ✅ 支持 RAW 链接：仓库里的图片能通过 https://gitee.com/用户名/仓库名/raw/分支/图片路径.png 直接访问（类似 GitHub 的 RAW 链接，但速度更快）。
  • 对比其他云盘：百度网盘的链接带防盗链，无法直接插入 Markdown；而 Gitee 的 RAW 链接是 “纯静态文件地址”，完美适配 Markdown 语法。

3. PicGo：图片上传 “自动化神器”

  • 定义：图片上传客户端，核心是 “一键上传本地图片，自动生成网络链接”。
  • 核心价值：把 “登录 Gitee→找仓库→点击上传→复制链接” 的繁琐步骤，压缩成 “拖入图片→自动出链接”（甚至支持快捷键 Ctrl+Alt+U）。
  • 为什么需要插件？
    PicGo 默认支持 GitHub、七牛云等图床，但 不直接支持 Gitee。这时需要安装 gitee-uploader 插件（用 Node.js 开发），让 PicGo 能对接 Gitee。

4. Node.js：插件的 “动力引擎”

  • 定义：让 JavaScript 代码能在电脑本地运行的 运行时环境（类似 Java 的 JVM，Python 的解释器）。
  • 在图床场景里的作用：
    PicGo 的插件（如 gitee-uploader）是用 Node.js 开发的，必须安装 Node.js 才能 运行这些插件。简单说：Node.js 是 “插件的发动机”，没有它，PicGo 无法加载 Gitee 插件。

二、环境搭建：Node.js 安装（必做！）

3.1 下载 Node.js

访问 Node.js 官网，选择 LTS 长期支持版（如18.18.0 LTS）：

  • Windows 用户选 x64 Installer（64 位系统通用）；
  • macOS 选 .pkg 安装包；
  • Linux 通过包管理器安装（如 sudo apt install nodejs）。

3.2 安装与验证（以 Windows 为例）

  1. 双击安装包，勾选 “Add to PATH”（自动配置环境变量，避免手动设置）；
  2. 一路点击 “Next”，默认路径安装即可；

打开命令提示符（CMD），输入以下命令验证：bash

node-v# 输出Node版本（如 v18.18.0） npm-v# 输出npm版本（如 9.8.1）

✅ 若正常输出版本，说明安装成功。
我这里是之前装好的，就不演示下载安装了，没有什么难度，主要还是国内下载比较慢的问题，如果不方便的朋友，可以加我好友，直接发你安装包

03ac93ac-e6d4-4e1d-a7ba-9e8261ce5658.png

三、PicGo 安装：图片上传客户端

4.1 下载对应版本

访问 PicGo 官网 或国内镜像，根据系统选择：

37a3c255c2c09e3367f0e98432f70996.png
  • Windows：优先选 PicGo-Setup-xxx-x64.exe（64 位系统专属，性能更优）；
  • macOS：选 PicGo-xxx.dmg；

Linux：选 PicGo-xxx.AppImage。Windows一般建议选这个 2.4的版本都是可以的，不要选2.3之前的老版本就行，因为老版本还不支持gitee插件

65e09fa495e62de253db9b75220abe61.png

注意这里可能会有一个小插曲——程序被报错不安全，这里直接选保留就行了

01598ec82afbbef0d8456cf4f2b0d8a9.png

4.2 安装与启动

  1. 双击安装包，按向导完成安装；

启动 PicGo 后，右下角托盘会出现图标，右键→**“打开主界面”** 即可操作。

b1fdfb00-70bf-4121-a35d-29904bc2de74.png

四、Gitee 配置：创建图片仓库

5.1 新建 Gitee 仓库

  1. 填写关键信息：
    • 仓库名称：建议含img或者picture；
    • 可见性：必须选 “开源”（否则图片无法公开访问）；
  2. 点击 “创建”。

初始化仓库：勾选（自动生成 README，便于管理）；

7a45789841e55857ea299a430d7be7a1.png

登录 Gitee 官网，点击右上角 “+”→新建仓库；

067aa939ac105d3ed200dadfa7425349.png

5.2 获取访问令牌（Token）

点击 Gitee 头像→**“设置”→“私人令牌”→“生成新令牌”**；

9f7c0fec1091330b99b6971bbd0d0b64.png
32297606a08e75639de441fde86e5464.png
ba72d63feda9fc18294013186ee977db.png
  1. 配置令牌：
    • 描述：填 PicGo图床（方便记忆）；
    • 权限：仅勾选 “projects”（最小必要权限，避免安全风险）；

提交后，复制生成的 Token（仅显示一次，务必保存到记事本！）。

1b43a66d22cbe26e3425a0bfda34d4d5.png

五、PicGo 配置：连接 Gitee 图床

6.1 安装 Gitee 插件

  1. 打开 PicGo 主界面→左下角 “插件设置”；

命令行手动安装：bash

npminstall picgo-plugin-gitee-uploader -g

先换国内 npm 源（加速下载）：bash

npm config set registry https://registry.npmmirror.com

搜索框输入 gitee，找到 gitee-uploader 1.1.2** 插件，点击 “安装”。

32ea619d9fb2d898721c4f2190dea609.png

⚠️ 若安装失败：

6.2 配置 Gitee 图床参数

点击 “设为默认图床” → “确定”，完成配置。

2ba155ae7f29eb8c0e90778c383fcdc5.png

填写关键参数（参考示例）：

74409ab048d010d7fbfa3533c8df2372.png
参数填写规则示例
repo用户名/仓库名（从 Gitee 仓库 URL 提取）your_gitee_name/note-img-bed
branch仓库分支（可不写，默认main或master）master
token刚才复制的 Gitee Tokenxxxxxxxxxxxxx
path图片存储路径（与仓库img文件夹一致）img/
customPath按日期分类（可选，如${year}/${month}/${day}）2025/09/16（自动生成）
17b3070d67452d5f07774d9fe95f9bfd.png

回到 PicGo 主界面→**“图床设置”→选择 “Gitee”**；

744d61d4ffdccd997c946c9190dfb1e5.png

六、Obsidian 集成：让本地图片自动上传

7.1 安装图片上传插件

搜索 Image Auto Upload，点击 “安装”→“启用”。

打开 Obsidian→**“设置”→“社区插件”→“浏览”**；

eda8bd714b8cb244687cec2549ced562.png

7.2 配置 PicGo 服务

  1. 在 Obsidian 插件设置中，找到 “Image Auto Upload”：

端口：默认36677,上传接口默认为http://127.0.0.1:36677/upload

95a415a84148147efd822cf77ed71c41.png


若被占用，可在 PicGo→**“设置”→“设置 Server”** 中修改

6b6b89466cbba92e64ee150c99856108.png

7.3 测试上传（关键步骤！）

  1. 在 Obsidian 中插入本地图片（拖入编辑区，或用 ![[pic.png]] 语法）；
  2. 查看图片链接：已自动替换为 Gitee 的网络链接（如 https://gitee.com/xxx/xxx.png）；

验证：复制链接到浏览器，若能正常显示图片，则配置成功。

900d4a4472db996b3468d1f2a9400897.png

七、常见问题排查

8.1 PicGo 上传失败

  • ❌ Node.js 未安装：重新运行 node -v 验证，若未安装则回到步骤三。

❌ 仓库路径错误：检查repo是否为用户名/仓库名，path是否与仓库img文件夹一致；

12b5e7b7a5e7fa87ded159d75a256be8.png

❌ Token 权限不足：重新生成 Token，确保勾选projects权限；

a3f064abab102e5abab4b7fe5aa5574b.png

8.2 Gitee 图片无法访问

  • ❌ 路径错误：检查 PicGo 配置的path和仓库实际文件夹是否一致（如img/是否存在）。

❌ 仓库未开源：进入 Gitee 仓库→**“管理”→“基本信息”→设为 “开源”**；

e9d6fb74e34c873721c4f81a37755963.png

8.3 Obsidian 上传无反应

❌ 端口冲突：修改 PicGo 的 Server 端口（如36678），并同步更新 Obsidian 插件配置。

46d7fa973b2d7bc6bea931f69276138a.png

❌ PicGo 未启动：确保 PicGo 在后台运行（托盘有图标）；

b1fdfb00-70bf-4121-a35d-29904bc2de74.png

八、总结：从本地到云端的跨越

通过 Gitee（存储）+ PicGo（上传）+ Node.js（环境） 的组合，我们实现了：

  • ✅ 本地图片自动转网络链接，跨设备、跨平台访问稳定；
  • ✅ 借助 Gitee 国内节点，访问速度优于 GitHub；
  • ✅ 配合 Obsidian 插件，写作时 “无感上传”，专注内容创作。

如果你在配置中遇到问题，欢迎在评论区留言，如果文章对您有所帮助，不妨点个三连支持一下！

附录：工具速链

Read more

【C++】告别“类型转换”踩坑，从基础到四种核心强制转换方式

【C++】告别“类型转换”踩坑，从基础到四种核心强制转换方式

各位大佬好，我是落羽！一个坚持不断学习进步的学生。 如果您觉得我的文章还不错，欢迎多多互三分享交流，一起学习进步！ 也欢迎关注我的blog主页:落羽的落羽 文章目录 * 一、回顾C语言的类型转换 * 二、C++中的类型转换 * 1. 内置类型转为自定义类型 * 2. 自定义类型转为内置类型 * 3. 自定义类型之间的转换 * 4. 类型安全与C++的四种强制类型转换方式 * 4.1 什么是类型安全？ * 4.2 static_cast * 4.3 reinterpret_cast * 4.4 const_cast * 4.5 dynamic_cast 一、回顾C语言的类型转换 C语言的类型转换主要是隐式类型转换和强制类型转换： * 隐式类型转换，是编译器在特定情况下自动进行的类型转换，通常发生在不同类型的表达式运算中。主要是整型之间、整型与浮点型之间、

By Ne0inhk
【C++开源库使用】调用开源库STB中的stbi_load_from_memory加载图片文件，进行灰化处理，然后调用stbi_write_png或stbi_write_jpg将灰化图片保存到文件中

【C++开源库使用】调用开源库STB中的stbi_load_from_memory加载图片文件，进行灰化处理，然后调用stbi_write_png或stbi_write_jpg将灰化图片保存到文件中

目录 1、图片灰化的实现思路 2、开源STB库下载 3、将图片文件的内容读到buffer中 4、将buffer中存放的图片文件数据传入到stbi_load_from_memory接口中，然后对返回的图片颜色值进行灰化处理 5、调用stbi_write_png或stbi_write_jpg接口将灰化后的图片数据保存成图片文件 6、图片灰化的完整代码        前一篇文章我们讲到了使用libcurl库发http/https请求去下载用户头像文件（文章链接：https://blog.ZEEKLOG.net/chenlycly/article/details/149175549），本篇文章则是同个SDK项目的后续需求中涉及到的功能。第三方厂商要求，对于不在线的人员，要显示灰化的头像。经研究决定使用开源STB库辅助实现图片灰化，调用STB开源库中的stbi_load_from_memory、stbi_write_png或stbi_write_jpg等接口。本文详细讲述一下实现过程，以供大家借鉴或参考。

By Ne0inhk
【C++深学日志】C++“类”的完全指南--从基础到实践（一）

【C++深学日志】C++“类”的完全指南--从基础到实践（一）

假想一下，你是一个顶级汽车设计师，你的任务不是亲自拧紧每一个螺丝，而是要设计出一幅“汽车蓝图”，你在图纸上设计了一辆汽车所需的一切：车轮、车灯、V8发动机、方向盘等，你手上这份设计好的蓝图就相当于我们今天要讲的C++中的“类”，它规定了汽车的属性（例如：离合器）和方法（功能：换挡），它本身并不是一辆真正的汽车，只是你的一份设计规划，后续你交付给工厂，工厂按照你的设计蓝图，生产出了一辆汽车，这就是实例化，后续工厂有根据你的蓝图设计了一条流水线，每一辆从流水线上生产下来的车辆，都是里这个蓝图（类）的一个对象，他们都有蓝图定义的属性和功能。在C++中类就充当着蓝图的作用，它定义了对象拥有哪些属性，那么就和我一起来揭开这份“蓝图”的面纱吧。 1.类 1.1.类的定义 类的基本思想是数据抽象和封装，数据抽象是一种依赖于接口和实现的分离式编程技术，类的接口包括用户所能执行的操作，类的实现则是包括类的数据成员、负责接口实现的函数以及定义类所需的各种私有函数。封装实现了类的接口和实现的分离，封装后的类隐藏了他的视线细节，也就是说，

By Ne0inhk