这篇文章详细介绍如何使用Gitee和GitHub图床来托管博客图片，提升博客性能和管理效率。

什么是图床？

图床是专门用于存储图片的在线服务，它能为你的博客带来以下优势：

  • ✅ 减少博客体积 - 图片不占用博客存储空间
  • ✅ 提升加载速度 - 专业CDN加速图片访问
  • ✅ 跨平台使用 - 一张图片可在多处引用
  • ✅ 稳定可靠 - 专业服务商提供数据保障

Gitee图床配置

第一步：创建Gitee仓库

  1. 访问 Gitee官网 并登录
  2. 点击右上角 + → 新建仓库
  3. 填写仓库信息：
    • 仓库名称：my-images
    • 设置为：公开 （重要！）
    • 勾选：使用Readme文件初始化

第二步：获取私人令牌

  1. 点击头像 → 设置
  2. 左侧菜单选择 私人令牌
  3. 点击 生成新令牌
  4. 勾选 projects 权限
  5. 复制生成的令牌（只显示一次！）

PicGo配置

安装PicGo

推荐使用包管理器安装：

# Windows用户
winget install PicGo.PicGo

# macOS用户  
brew install --cask picgo

# 或从GitHub下载：https://github.com/Molunerfinn/PicGo/releases

安装Gitee插件

  1. 打开PicGo
  2. 进入 插件设置
  3. 搜索 gitee
  4. 安装 gitee-uploader 插件

配置Gitee图床

进入 图床设置 → Gitee图床，填写：

repo: 你的用户名/仓库名 (如: zhangsan/my-images)
branch: master
token: 刚才获取的私人令牌
path: img/ (图片存储路径)
customPath: 留空
customUrl: 留空

在文章中使用图片

基础语法

Markdown格式（推荐）

![图片描述](图片链接)

示例：

![项目演示](https://gitee.com/zhangsan/my-images/raw/master/img/demo.png)

HTML格式（更灵活）

<img src="图片链接" alt="图片描述" width="600">

示例：

<img src="https://gitee.com/zhangsan/my-images/raw/master/img/demo.png" 
     alt="项目演示" 
     width="600" 
     style="border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">

高级使用技巧

1. 响应式图片

<div style="text-align: center;">
  <img src="https://gitee.com/你的用户名/my-images/raw/master/img/responsive-demo.png" 
       alt="响应式演示" 
       style="max-width: 100%; height: auto; border-radius: 8px;">
</div>

2. 图片组合展示

<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
  <img src="https://gitee.com/你的用户名/my-images/raw/master/img/before.png" 
       alt="优化前" width="45%" style="border-radius: 8px;">
  <img src="https://gitee.com/你的用户名/my-images/raw/master/img/after.png" 
       alt="优化后" width="45%" style="border-radius: 8px;">
</div>

3. 带说明的图片

<figure style="text-align: center; margin: 20px 0;">
  <img src="https://gitee.com/你的用户名/my-images/raw/master/img/architecture.png" 
       alt="系统架构图" 
       style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
  <figcaption style="margin-top: 10px; color: #666; font-size: 14px;">
    图1：系统整体架构设计
  </figcaption>
</figure>

使用工作流程

日常使用步骤

  1. 准备图片

    • 优化图片大小（推荐 < 1MB）
    • 使用有意义的文件名（英文+数字）
    • 选择合适的格式（jpg/png/webp）

  2. 上传图片

    • 拖拽到PicGo界面
    • 或使用快捷键 Ctrl+Shift+P
    • 自动上传并复制链接

  3. 插入文章

    • 在Markdown中粘贴链接
    • 添加有意义的alt描述
    • 调整显示样式

常用快捷键

功能 快捷键
快速上传 Ctrl + Shift + P
打开文件选择器 Ctrl + Shift + O
从URL上传 Ctrl + Shift + U
上传剪贴板图片 Ctrl + Shift + C

最佳实践

图片命名规范

# 好的命名示例
project-overview.png
user-interface-design.jpg
system-architecture-diagram.png
before-vs-after-comparison.png

# 避免的命名
图片1.png
截图.jpg
IMG_20231002.png

文件夹组织

img/
├── blog/           # 博客相关图片
│   ├── headers/    # 文章头图
│   ├── content/    # 文章内容图片
│   └── thumbnails/ # 缩略图
├── projects/       # 项目展示图片
├── tutorials/      # 教程步骤图片
└── misc/          # 其他图片

性能优化建议

  1. 图片压缩

    • 使用 TinyPNG 压缩图片
    • 或使用PicGo插件自动压缩

  2. 格式选择

    • 照片：JPEG（.jpg）
    • 图标/插图：PNG（.png）
    • 动图：GIF或WebP

  3. 尺寸控制

    • 博客宽度通常为 800-1200px
    • 避免上传过大的原图

故障排除

常见问题

1. 图片无法显示

  • 检查Gitee仓库是否为公开状态
  • 确认图片链接格式正确
  • 验证图片是否成功上传

2. PicGo上传失败

  • 检查网络连接
  • 验证Token是否正确
  • 确认仓库路径配置

3. 图片加载慢

  • 考虑使用CDN加速
  • 压缩图片大小
  • 选择合适的图片格式

GitHub图床配置（推荐）

GitHub图床是更加稳定的选择，兼容性极好：

第一步：创建GitHub仓库

  1. 访问 GitHub官网 并登录
  2. 点击右上角 + → New repository
  3. 填写仓库信息：
    • Repository name：my-images
    • 设置为：Public （重要！）
    • 勾选：Initialize this repository with a README

第二步：生成GitHub Token

  1. 点击头像 → Settings
  2. 左侧菜单选择 Developer settings
  3. 点击 Personal access tokens → Tokens (classic)
  4. 点击 Generate new token → Generate new token (classic)
  5. 配置Token：
    • Note: PicGo图床使用
    • Expiration: No expiration
    • Scopes: 只勾选 repo (完整仓库访问权限)
  6. 生成并复制token（以 ghp_ 开头）

第三步：在PicGo中配置GitHub图床

  1. 打开PicGo，进入 图床设置
  2. 选择 GitHub图床 （内置，无需插件）
  3. 填写配置：
仓库名: 你的GitHub用户名/my-images
分支名: main (或 master)
Token: 刚才生成的GitHub token
存储路径: img/
自定义域名: 留空

GitHub图床优势

  • ✅ 稳定可靠 - GitHub提供全球CDN
  • ✅ 无需插件 - PicGo原生支持
  • ✅ 免费使用 - 单仓库100GB空间
  • ✅ 版本控制 - 完整的Git管理
  • ✅ 全球访问 - 世界各地都能访问

七牛云图床配置

第一步：创建七牛云存储空间

  1. 访问 七牛云控制台
  2. 登录后，进入 对象存储 → 空间管理
  3. 点击 新建空间，填写信息：
    • 空间名称：qiqi776（你的桶名）
    • 存储区域：选择 华北-河北（区域代码：z1）
    • 访问控制：选择 公开空间（用于图床）

第二步：绑定自定义域名

  1. 在空间管理页面，点击你的存储空间
  2. 进入 域名管理 → 自定义域名
  3. 点击 绑定域名，填写：
    • 域名：image.huangzhongqi978.top
    • 协议：选择 HTTPS（推荐）或 HTTP
  4. 完成域名解析配置：
    • 在你的域名服务商（如阿里云、腾讯云）添加 CNAME 解析
    • 主机记录：image
    • 记录类型：CNAME
    • 记录值：七牛云提供的 CNAME 地址（如：xxxxx.qiniucdn.com）
  5. 等待域名解析生效（通常几分钟到几小时）

第三步：获取 AccessKey 和 SecretKey

  1. 在七牛云控制台，点击右上角头像
  2. 选择 密钥管理
  3. 如果没有密钥，点击 创建密钥
  4. 复制 AccessKey 和 SecretKey（SecretKey 只显示一次，请妥善保存）

第四步：在 PicGo 中配置七牛云

  1. 打开 PicGo，进入 图床设置 → 七牛图床
  2. 填写配置信息：
设定KeyID: 你的 AccessKey
设定KeySecret: 你的 SecretKey
设定存储空间名: qiqi776
设定存储区域: z1 (华北-河北)
设定访问网址: https://image.huangzhongqi978.top
或: http://image.huangzhongqi978.top

重要配置说明：

  • 存储区域代码对照表：

    • z0 - 华东（浙江）
    • z1 - 华北（河北）✅ 你的选择
    • z2 - 华南（广东）
    • na0 - 北美（洛杉矶）
    • as0 - 东南亚（新加坡）

  • 访问网址格式：

    • 必须包含协议：https:// 或 http://
    • 不要加斜杠：https://image.huangzhongqi978.top ✅
    • 不要写：https://image.huangzhongqi978.top/ ❌

第五步：配置防盗链（推荐）

防盗链可以防止他人未经授权引用你的图片，保护带宽和流量。

  1. 在七牛云控制台，进入你的存储空间

  2. 点击 空间设置 → 访问控制 → 防盗链

  3. 选择防盗链模式：

    白名单模式（推荐）：

    • 仅允许指定域名访问你的图片
    • 添加你的博客域名：
      huangzhongqi978.top
www.huangzhongqi978.top
localhost
127.0.0.1
    • 其他站点直接引用会被拦截（显示 403 错误）

    黑名单模式：

    • 禁止指定域名访问
    • 适合需要阻止特定恶意站点的场景

  4. 保存设置，立即生效

注意事项：

  • ✅ 配置白名单后，只有你的博客可以正常显示图片
  • ✅ 可以有效防止图片被盗用，节省流量成本
  • ⚠️ 如果图片在其他网站无法显示，检查是否在白名单中
  • ⚠️ 本地开发时记得添加 localhost 和 127.0.0.1

常见问题排查

问题1：上传失败，提示”域名未绑定”

解决方案：

  • 检查七牛云控制台是否已绑定域名
  • 确认域名解析是否生效（使用 nslookup image.huangzhongqi978.top 检查）
  • 等待域名解析完全生效（可能需要几小时）

问题2：上传失败，提示”区域错误”

解决方案：

  • 确认存储区域代码：华北-河北应该是 z1（不是 z0）
  • 如果确实创建在河北，区域代码应该是 z1

问题3：图片能上传但无法访问

解决方案：

  • 检查存储空间是否设置为”公开空间”
  • 检查自定义域名的 HTTPS 证书是否配置
  • 确认访问网址配置是否正确（包含协议）

问题4：HTTPS 访问失败

解决方案：

  • 在七牛云控制台 → 域名管理 → SSL证书，配置 HTTPS 证书
  • 可以使用七牛云提供的免费证书，或上传自己的证书

问题5：配置防盗链后图片加载失败

解决方案：

  • 检查你的博客域名是否在白名单中
  • 确认域名格式正确（不要包含协议，如：huangzhongqi978.top 而不是 https://huangzhongqi978.top）
  • 本地开发时，确保添加了 localhost 和 127.0.0.1
  • 如果使用 www 子域名，也要添加到白名单
  • 检查浏览器控制台是否有 403 错误（表示被防盗链拦截）

七牛云图床优势

  • ✅ CDN 加速 - 全球 CDN 节点，访问速度快
  • ✅ 自定义域名 - 支持绑定自己的域名
  • ✅ 防盗链保护 - 支持黑白名单，防止图片被盗用
  • ✅ 免费额度 - 每月 10GB 存储 + 10GB 流量
  • ✅ 稳定可靠 - 企业级对象存储服务
  • ✅ PicGo 原生支持 - 无需安装插件

备用方案

如果需要其他图床选择：

  1. SM.MS - 免费图床服务
  2. 阿里云OSS - 企业级对象存储
  3. 腾讯云COS - 企业级对象存储

总结

本教程介绍了两种主流图床方案：

Gitee图床

  • 🚀 访问速度快 - 国内服务器，低延迟
  • 💰 完全免费 - 无存储和流量限制
  • 🔧 配置简单 - PicGo插件支持
  • 🇨🇳 本土优势 - 适合中文博客

GitHub图床（推荐）

  • 🌍 全球稳定 - GitHub提供可靠服务
  • 🔧 兼容性好 - PicGo原生支持
  • 📦 大容量 - 单仓库100GB空间
  • 🔒 版本控制 - 完整的Git管理

通过本教程的配置，你可以：

  • 大幅减少博客仓库大小
  • 提升图片加载速度
  • 实现图片的统一管理
  • 支持跨平台图片引用

建议优先选择GitHub图床，稳定性更好。如果国内访问GitHub较慢，可以考虑Gitee作为备选方案。

💡 小贴士：记得定期备份重要图片，虽然Gitee很稳定，但多一份备份总是好的！