前言
在使用 Hexo 搭建博客时，很多小伙伴都会遇到两个问题：
- 本地图片占用空间过大：图片直接保存在本地和 GitHub 仓库，会导致仓库体积膨胀
- VSCode 粘贴图片不便：每次写博客时，粘贴的图片无法自动保存到对应的文章文件夹
本文将介绍如何使用图床服务来优雅地解决这些问题。
什么是图床？
图床是一种图片存储和托管服务，可以：
- 节省本地和 GitHub 仓库空间
- 加快图片加载速度（配合 CDN）
- 支持图片外链，在 Markdown 中直接引用
- 方便图片管理和备份
解决方案概述
我们将使用以下工具组合：
- PicList：强大的图床上传工具，支持多种图床服务
- SM.MS：免费图床服务（也可选择其他图床）
- VSCode 插件：实现编辑器内一键上传图片
详细配置步骤
第一步：安装 PicList
- 访问 PicList Releases
- 下载最新的 Windows 安装包（
PicList-Setup-x.x.x.exe） - 双击安装，按提示完成安装
PicList 支持的图床服务：
- SM.MS（免费，推荐新手）
- imgloc（免费，无需注册）
- 阿里云 OSS（稳定，有免费额度）
- 腾讯云 COS（稳定，有免费额度）
- GitHub（免费，但国内访问较慢）
第二步：注册并配置 SM.MS 图床
- 访问 SM.MS 注册页面 注册账号
- 登录后访问 API Token 页面
- 点击生成 API Token，复制保存
- 打开 PicList 应用
- 点击 图床设置 → SM.MS 图床
- 填入 API Token，点击确定
第三步：安装 VSCode 插件
在 VSCode 中打开博客项目：
- 按
Ctrl+Shift+X打开扩展面板 - 搜索 “Image/Picture Uploader (PicList)”
- 点击安装
第四步：使用方法
配置完成后，在写博客时非常方便：
方式一：剪贴板上传（最常用）
- 截图或复制图片到剪贴板
- 在 Markdown 文件中按
Ctrl+Alt+U - 图片自动上传并插入 Markdown 链接
方式二：拖拽上传
直接拖拽图片到编辑器，自动上传并插入链接
方式三：右键上传本地图片
右键点击图片文件，选择 “Upload Image with PicList”
其他图床推荐
imgloc
- 优点：完全免费，无需注册
- 缺点：稳定性稍差
- 适用场景：临时图片存储，测试使用
阿里云 OSS
- 优点：稳定快速，国内访问速度快
- 免费额度：40GB 存储，每月 5GB 流量
- 适用场景：生产环境，追求稳定性
腾讯云 COS
- 优点：稳定快速，CDN 加速
- 免费额度：50GB 存储（6 个月）
- 适用场景：生产环境，国内用户为主
常见问题
Q: 图片上传失败怎么办？
A: 检查以下几点：
- 网络连接是否正常
- API Token 是否正确
- 图床服务是否可用
Q: 如何批量上传图片？
A: 在 PicList 主界面可以批量选择图片上传，然后复制生成的 Markdown 链接
Q: 如何管理已上传的图片？
A: 在图床服务的管理后台（如 SM.MS）或 PicList 的相册管理中可以查看和删除
优化建议
- 图片压缩：上传前使用 TinyPNG 压缩图片
- 定期清理：定期在图床后台删除不再使用的图片
- 备份数据：重要图片建议备份到本地或云盘
- 使用 CDN：如果使用阿里云 OSS 或腾讯云 COS，可以开启 CDN 加速
效果对比
使用图床前：
- 本地图片：2MB+ 每张
- GitHub 仓库：几百 MB
- 图片加载：较慢
使用图床后：
- 本地图片：0
- GitHub 仓库：仅 Markdown 文本
- 图片加载：快速（配合 CDN）
总结
通过配置图床服务，我们优雅地解决了 Hexo 博客的图片管理问题：
- 释放了本地和仓库空间
- 实现了 VSCode 一键上传图片
- 提升了博客加载速度
如果你在配置过程中遇到问题，欢迎在评论区交流！