解决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

Spring Boot 自动配置

目录 什么是自动配置？ Spring 加载 Bean @ComponentScan @Import 导入类 导入 ImportSelector 接口的实现类 SpringBoot 原理分析 @EnableAutoConfiguration @Import(AutoConfigurationImportSelector.class)  AutoConfigurationPackage SpringBoot 自动配置流程 什么是自动配置？ Spring Boot 的自动配置：当 Spring 容器启动后，一些配置类、bean 对象等就自动存入 Ioc 容器中，而不再需要我们手动去声明，从而简化了程序开发过程，省去了繁琐的配置操作 也就是说，Spring Boot 的自动配置，就是 SpinrgBoot 将依赖 jar 包中的配置类以及 Bean 加载到 Spring Ioc 容器中的过程 在本篇文章中，

By Ne0inhk
Spring boot启动原理及相关组件

Spring boot启动原理及相关组件

优质博文：IT-BLOG-CN 一、Spring Boot应用启动 一个Spring Boot应用的启动通常如下： @SpringBootApplication@Slf4jpublicclassApplicationMain{ publicstaticvoidmain(String[] args){ ConfigurableApplicationContext ctx =SpringApplication.run(ApplicationMain.class, args);}} 执行如上代码，Spring Boot程序启动成功。事实上启动Spring Boot应用离不开SpringApplication。 所以，我们跟随SpringApplication的脚步，开始从源码角度分析Spring Boot的初始化过程。 btw，可参看例子一节，我对Spring Boot启动的拓展点都做了demo，可参照下面源码分析进行理解。 文档有一句话说了SpringApplication做了什么（目的）： Create an appropriate ApplicationContext

By Ne0inhk
SpringAI 全栈开发 + RAG 检索增强实战

SpringAI 全栈开发 + RAG 检索增强实战

前言 随着生成式AI技术的规模化落地，企业级AI应用开发已从技术验证走向生产级部署。Java作为企业级开发的主流语言，长期以来缺乏原生适配Spring生态的AI开发框架，导致开发者需要对接多套异构SDK、处理复杂的适配逻辑、难以快速落地核心AI能力。SpringAI的出现彻底改变了这一现状，它以Spring生态原生的设计理念，提供了统一的大模型接入抽象、全链路的RAG能力支持、无缝整合Spring Boot的自动配置特性，让Java开发者可以用极低的成本完成企业级AI应用的开发与落地。 一、核心技术栈底层原理与选型 1.1 SpringAI核心架构与设计理念 SpringAI是Spring官方推出的开源AI应用开发框架，完全遵循Spring生态的设计哲学，提供了可移植的API抽象，支持主流大模型服务、向量数据库、文档处理、RAG、Function Calling等AI应用开发的全场景能力。 其核心架构分为四层： * 接入层：统一封装主流大模型、Embedding模型、向量数据库的SDK，屏蔽底层异构差异 * 抽象层：定义ChatModel、EmbeddingModel、

By Ne0inhk
Windows下使用nvm-windows管理Node.js版本及npm配置全指南

Windows下使用nvm-windows管理Node.js版本及npm配置全指南

在前端开发中，不同项目可能依赖不同版本的Node.js，直接安装多个Node版本会导致环境冲突。nvm-windows（Node Version Manager for Windows）是Windows系统下的Node.js版本管理工具，能轻松实现多版本切换、安装和卸载，配合npm配置还能提升开发效率。本文将从安装到实战，详细讲解nvm-windows的使用及npm配置技巧。 一、什么是nvm-windows？ nvm-windows是Windows系统专用的Node.js版本管理工具，核心功能： * 同时安装多个Node.js版本，互不干扰； * 快速切换当前使用的Node版本； * 自动管理每个Node版本对应的npm（无需单独安装npm）； * 支持安装稳定版、LTS版或指定版本。 二、安装nvm-windows（详细步骤） 1. 前置准备：卸载现有Node.js（可选但推荐） 如果已单独安装过Node.js，建议先卸载： * 打开“控制面板→程序和功能”，找到“Node.js”卸载； * 删除残留目录（如C:

By Ne0inhk