前言:为什么需要图床?
图床是什么?
图床(Image Hosting Service) 是专用于存储图片的云端服务,通过外链 URL 供网页引用。与本地存储相比,它具备高可用、CDN 加速、跨平台共享等优势。
当前工作流的痛点
目前博主同时维护两个博客平台:
- Halo:基于 Java 的动态博客系统
- Astro:静态站点生成器
当前问题:在 VS Code 中写完文章后,图片需要:
- 复制到 Halo 的附件目录
- 调整路径格式适应不同平台
理想状态:一次上传,多处复用,路径统一。
图床方案对比
| 方案 | 代表服务 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| A. 三方图床 | SM.MS、Imgur | 免费、即开即用 | 不稳定(随时可能关闭)、迁移困难、有审查风险 | 临时测试 |
| B. 自建图床 | Chevereto、Lychee | 完全可控 | 需要服务器带宽(瓶颈)、维护成本高 | 技术极客 |
| C. 对象云存储 | 腾讯云 COS、阿里云 OSS | 稳定可靠、按需付费、支持自定义域名和 CDN | 需要少量费用(实际极低) | 生产环境首选 |
选择 C 的理由:
- 成本:对于个人博客,每月流量费用通常不足 1 元(访问人数少😊,远低于服务器带宽升级费用)
- 迁移便利:使用自定义域名,更换云厂商只需修改 DNS 解析,无需改动文章中的图片链接
- 生态完善:PicGo 等工具支持度最好
为什么选择腾讯云 COS:
- 与阿里云 OSS 功能相当,但它赠送的免费额度更多(还有之前剩了几百元没花完)
- 和微信生态打通(如果用公众号,这是隐藏优势,虽然还没做公众号)
效果预览:配置完成后的丝滑体验
工作流程:
- 截图:使用 Snipaste 截取屏幕区域(F1 截图,F3 贴图)
- 上传:手动触发 PicGo 上传至 COS
- 获取链接:上传成功后自动复制 Markdown 格式链接到剪贴板

- 插入文章:直接在 VS Code 中粘贴,无论 Halo 还是 Astro 都能正确显示
- 多端同步:无论是在
本地预览(加入防盗链直接用会有问题,额外设置可解决)、还是生产环境,图片都能正常加载
耗时对比:
- 传统方式(手动复制到两个项目):2-3 分钟/张图
- 图床方式(PicGo 自动上传):3 秒/张图
flowchart TB
subgraph 传统方式["传统方式:手动复制"]
direction LR
A[截图] --> B[复制到vscode的Astro项目]
B --> C[复制到 Halo 项目触发自动上传附件]
C --> D[调整Halo项目展示格式-无法复用]
D --> E[检查两站是否正常显示]
E --> F[完成]
end
subgraph 效率对比["效率提升 40-60 倍"]
direction LR
G[2-3分钟] --> H[3秒钟]
end
subgraph 图床方式["图床方式:全自动"]
direction LR
I[Snipaste F1 截图] -->|手动触发| J[PicGo 上传至 COS]
J -->|自动复制| K[Markdown 链接到剪贴板]
K --> L[VS Code 直接粘贴]
L --> M[完成]
end
传统方式 --> 效率对比 --> 图床方式
style 传统方式 fill:#fff2f0,stroke:#ff4d4f,stroke-width:2px
style 图床方式 fill:#f6ffed,stroke:#52c41a,stroke-width:2px
style 效率对比 fill:#fffbe6,stroke:#faad14,stroke-width:2px
style G fill:#ffccc7,stroke:#ff4d4f实战配置指南
第一部分:腾讯云 COS 基础配置
1.1 开通服务并创建存储桶
- 登录 腾讯云控制台
- 进入 对象存储 → 存储桶列表 → 创建存储桶
创建成功如下

- 关键配置:
- 地域:选择离你访客最近的地区(如华东地区选”南京”)
- 访问权限:公有读私有写(必须!否则图片无法外链访问)
- 存储桶名称:全局唯一,建议
yourname-images-125xxxxx(博主这就因为只做图床,所以就用名称+数字了)
1.2 绑定自定义域名(强烈推荐)
为什么不用默认域名?
- 默认域名如
https://xxxx.cos.ap-nanjing.myqcloud.com太长且不专业(其实不利于迁移,万一哪天要换云厂商,就需要修改所有文章中的图片链接) - 自定义域名支持 HTTPS 和 CDN 加速
操作步骤:
- 进入存储桶 → 域名传输管理 → 自定义源站域名
- 添加域名,如
img.yourdomain.com - 在 DNS 服务商(如 Cloudflare)添加 CNAME 记录:
CNAME img xxxx.cos.ap-nanjing.myqcloud.com
1.3 配置 HTTPS 证书
注意:腾讯云免费证书有效期仅 90 天,到期需手动更新。
1.4 创建专用子账号(安全最佳实践)
最安全的做法:不要使用主账号的 SecretKey!
- 进入 访问管理 → API 密钥管理
- 新建子用户,勾选 “编程访问”
- 权限策略选择 “QcloudCOSDataWriteOnly”(仅写权限,防止密钥泄露后被下载全部图片,其实是给picgo上传图片用的)
- 保存 SecretId 和 SecretKey(仅显示一次,务必保存)
NOTE后续懒人方式自动给证书续期也需要使用子账号,可在此一并创建一个新的子账号,权限策略选择 “QcloudSSLFullAccess、QcloudCOSFullAccess”(分别对应证书管理和COS存储桶管理) 生成对应SecretId和SecretKey,保存好。
第二部分:PicGo 配置与优化
2.1 安装与基础配置
- 下载 PicGo(推荐 2.4.0 以上版本)
- 图床设置 → 腾讯云 COS → 填写配置:
{"secretId": "你的SecretId","secretKey": "你的SecretKey","bucket": "存储桶名称-APPID","area": "ap-nanjing","path": "blog/", // 可选:按年份分类如 "2024/""customUrl": "https://img.yourdomain.com"}
2.2 必备插件推荐
在 PicGo 插件设置中安装:
插件商店点击商店图标,可跳转至github插件仓库,查看插件介绍, 安装插件。插件安装只需定位到
C:\Users\{username}\AppData\Roaming\picgo\目录,调出cmd,执行npm install picgo-plugin-xxx即可安装插件。注意只能用npm安装,不能用pnpm因为不兼容,安装后右下角应用重启picgo。
-
rename-file-before-upload:自动重命名文件(避免中文和特殊字符)
C:\Users\用户名\AppData\Roaming\picgo\data.json // 配置示例:按日期+随机数命名{"picgo-plugin-rename-file": {"format": "{y}/{m}/{d}/{h}-{i}-{s}-{rand:6}"//按需配置即可},} -
picgo-plugin-webp(可选):上传前自动压缩图片为 WebP 格式,节省流量
2.3 快捷键与效率设置
- 上传快捷键:设置为
Ctrl+Shift+U(截图后一键上传) - 自动复制:开启”上传后自动复制 URL”
- 链接格式:选择 Markdown 格式
测试:截图 → 按快捷键 → 粘贴到编辑器,整个过程应在 5 秒内完成。
第三部分:生产环境加固与开发调试
3.1 配置防盗链(Referer 白名单)
目的:防止其他网站直接引用你的图片,产生不必要的流量费用。
配置位置:COS 控制台 → 存储桶 → 防盗链设置
推荐配置:
- Referer 白名单:
https://yourdomain.com(你的主站)https://*.yourdomain.com(子域名)http://localhost:*(本地开发,可选但不建议加)
- 空 Referer:不允许(严格模式)
⚠️ 注意:开启后,直接粘贴图片 URL 到浏览器会显示 403,这是预期行为。
3.2 本地开发环境配置(解决 403 问题)
问题现象:开启防盗链后,本地 astro dev(localhost:4321)预览时图片显示 403。
原因:本地开发时的 Referer: http://localhost:4321 不在白名单中。
解决方案 - Hosts 域名映射:
-
修改 hosts 文件:
C:\Windows\System32\drivers\etc\hosts # Mac/Linux: /etc/hosts127.0.0.1 dev.yourdomain.com注意:修改 hosts 文件后需刷新 DNS 缓存(
ipconfig /flushdns).此前遇到过因为注释了hosts默认的127.0.0.1 localhost和::1 localhost导致访问localhost:4321失败的问题。 -
修改 Astro 配置:
astro.config.mjs export default defineConfig({server: {port: 4321,host: "0.0.0.0", // 允许 127.0.0.1 访问allowedHosts: true, // 允许 dev.yourdomain.com},integrations: [{name: 'dev-hint',hooks: {'astro:server:start': () => {console.log('\n\x1b[33m>>> 开发访问: http://dev.yourdomain.com:4321/ <<<\x1b[0m\n')}}}]}); -
更新 COS 白名单:添加
dev.yourdomain.com:4321
效果:
- 开发时访问
http://dev.yourdomain.com:4321/,Referer 匹配白名单,图片正常显示 - 生产环境使用真实域名,不受影响
- 其他未授权网站引用图片时,返回 403
3.3 懒人方案 - 自动续期证书
问题:腾讯云免费证书有效期仅 90 天,过期后 HTTPS 访问会失败。 解决方案: 方案一:使用腾讯云的证书管理服务,可以自动续期证书,托管到cos即可无需手动操作。(能用的最好,可惜博主不行,DNS服务提供商非腾讯云) 方案二:使用Let’s Encrypt免费证书,使用Certimate自动续期证书。
接下来,我们来配置Certimate自动续期证书。
1、提前准备好certimate工具,推荐在服务器上用docker安装(篇幅问题,就不展开了)
2、配置certimate(使用前修改好certimate账号及密码)
这是certimate的主页
要实现自动化托管,需要配置一个工作流定时运行,实现监测续期。其中需要配置的参数有:
- 服务提供商
- 证书颁发机构(不用配置,certimate默认的够用了)
- 通知渠道(可选邮件smtp或webhook,邮件通知参考这里)
配置服务商可参考如下:
配置完成后,以下是需要用到的服务:
-
负责DNS解析和配置COS的服务提供商,DNS解析是因为申请证书需要审核,COS是因为配置证书要托管到COS上。

-
负责通知的服务提供商,通知是因为证书续期成功或失败,需要及时知道。

创建一个工作流,定时运行certimate工具,监测证书是否需要续期(标准即可)。
按照需要把对应过程节点选择合适的服务提供商即可。
点击运行工作流,即可开始执行一次工作流
若执行中成功或失败,会收到通知。
失败可查看错误信息,如图:
可看出是ssl证书部署出错,没有ssl部署的权限,需要到腾讯云控制台开启ssl部署权限。
3.4 成本优化与监控
费用控制技巧:
- 生命周期管理:COS 控制台设置自动清理,比如 30 天自动删除临时文件
- 图片压缩:使用 PicGo 压缩插件,WebP 格式可减少 70% 流量
- CDN 缓存:开启 CDN 并设置较长的浏览器缓存时间(如 30 天)
监控告警:
- 腾讯云监控设置流量阈值告警(如单日流量超过 1GB 发短信通知)
- 定期检查访问日志,发现异常 Referer 及时加入黑名单
常见问题 FAQ
Q1: 开启防盗链后,RSS 阅读器里图片显示 403?
A: RSS 阅读器的 Referer 通常是空或阅读器域名。需要在白名单中添加 https://rsshub.app 等常用 RSS 服务,或允许空 Referer(权衡安全性)。
Q2: 如何批量迁移历史图片到 COS?
A: 使用 coscmd 工具或 PicGo 的”通过 URL 上传”功能批量导入,配合正则替换旧文章中的图片链接(用sed -i 's|旧链接|新链接|g' 文章.md 命令就可以了)。
Q3: 图片上传失败,提示 CORS 错误?
A: 检查 COS 的跨域访问 CORS 设置,添加你的本地开发域名和主站域名,允许 GET 和 HEAD 方法。
Q4: 是否可以完全免费? A: 腾讯云 COS 有免费额度(通常 50GB 存储 + 10GB 下行流量/月),个人博客完全够用。超出后费用约 ¥0.15/GB,每月通常不足 ¥1(当然博主这没人访问,要是有流量,还是要注意一下的)。
