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

解决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仓库分支(可不写,默认mainmastermaster
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++ 模板进阶:特化、萃取与可变参数模板

C++ 模板进阶:特化、萃取与可变参数模板 💡 学习目标:掌握模板进阶技术的核心用法,理解模板特化的深层应用、类型萃取的实现原理,以及可变参数模板的灵活使用,提升泛型编程的实战能力。 💡 学习重点:模板特化的进阶场景、类型萃取工具的设计与应用、可变参数模板的展开技巧、折叠表达式的使用方法。 一、模板特化进阶:处理复杂类型场景 💡 模板特化不只是针对单一类型的定制,还能处理指针、引用、数组等复杂类型,实现更精细的类型适配逻辑。 1.1 指针类型的模板特化 通用模板默认处理普通类型,我们可以为指针类型单独编写特化版本,实现指针专属的逻辑。 #include<iostream>#include<string>usingnamespace std;// 通用模板:处理普通类型template<typenameT>classTypeProcessor{public:staticvoidprocess(T data){ cout

By Ne0inhk
【C++修炼之路】类与对象实战:实现一个日期类

【C++修炼之路】类与对象实战:实现一个日期类

🏝️专栏: 【C++修炼之路】 🌅主页: f狐o狸x “于高山之巅,方见大河奔涌;于群峰之上,更觉长风浩荡”  目录 一、日期类的核心功能  二、日期类的定义 三、实现日期类比较大小 四、日期类加减 五、输入输出日期 六、附带功能         经过前面两篇文章的学习,相信聪明的你应该已经初步了解类与对象了,现在我们将一起实现一个日期类,进一步加深我面对类的理解。         在软件开发中,日期和时间的处理无处不在,从日程管理到金融计算,从数据分析到天气预报,日期类的设计都是开发者必须面对的挑战。在本文中,我们将从零开始,一步步实现一个功能完备的日期类。无论你是C++新手,还是想巩固面向对象编程基础,这个项目都会让你收获满满。 一、日期类的核心功能         想象一下:如果你要实现你手机里的日历这个app,它应该有些什么功能呢?         我认为主要功能如下:  日期合法性校验 日期加减(支持天数、月数、年数) 日期差计算

By Ne0inhk

在 Mac 上完美配置 VSCode 的 C/C++ 开发环境(GCC/G++ 详细教程 )

本文手把手教你如何在 macOS 系统上配置 VSCode 的 C/C++ 开发环境,解决各种常见问题,让你轻松开启 C/C++ 编程之旅! 前言 作为程序员,一个顺手的开发环境至关重要。VSCode 作为轻量级但功能强大的代码编辑器,配合 GCC/G++ 编译器,能够在 Mac 上提供优秀的 C/C++ 开发体验。本文将详细介绍从零开始的完整配置过程。 一、环境准备:安装编译工具 1.1 安装 Xcode Command Line Tools(推荐首选) 打开终端,执行以下命令: xcode-select --install 执行后会弹出安装对话框,点击"安装"即可。

By Ne0inhk

C++ 运算符重载全解析:+、=、>>、<<、++、==

什么是运算符重载?         运算符重载是 C++ 提供的一种语法扩展机制,使得自定义类也可以使用类似于内置类型的操作符,换句话说,你可以为你的类赋予自然的操作符语义,让代码更优雅、更贴近业务逻辑。  基本语法         重载函数本质上是一个特殊函数: 返回类型 operator符号(参数列表) 它可以是: * 成员函数 * 非成员函数(全局函数,或友元)  一、重载 + 运算符  为什么要重载 + 运算符?         假设你有一个二维向量类: class Vector2D { public: int x, y; };         现在你希望支持类似以下操作: Vector2D a(1, 2), b(3, 4); Vector2D c = a + b; // 理想行为         这是不可能的,除非你 告诉编译器“+”在你的类中应该怎么用 —— 也就是重载它。  如何重载

By Ne0inhk