图床使用完整指南

这篇文章详细介绍如何使用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. SM.MS - 免费图床服务
2. 阿里云OSS - 企业级对象存储
3. 腾讯云COS - 企业级对象存储

总结

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

Gitee图床

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

GitHub图床（推荐）

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

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

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

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

---

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