图片管理
Markdown 图片管理的最佳实践：本地粘贴与图床方案对比
在 Markdown 的世界中，图片管理确实是一个比较麻烦的事情。相比 Word 而言，Markdown 不是一个完整的文档格式，它只是一个文本文件，图片是外部资源，需要存放在其他地方。
如何保存我们的图片，并且让 Markdown 中正确引用它们呢？
这份文档只保留最实用的结论：我们推荐两种方式管理图片，并说明各自的优缺点。
方案对比：我们推荐的方式
我们主要推荐 本地粘贴 和 VS Code 插件 + 图床 两种方式。至于曾经流行的 PicGo，由于配置繁琐且不够稳定，我们不再推荐作为首选。
| 方案 | 核心体验 | 优点 | 缺点 | 推荐指数 |
|---|---|---|---|---|
| 1. 本地粘贴 | Cmd+V 直接用 | 零配置，最简单，文件完全掌控，发布后易于复制 | 迁移/分享文档需打包图片，路径易错 | ⭐⭐⭐⭐⭐ (新手/个人项目首选) |
| 2. VS Code 插件 | Opt+Shift+V 自动上传 | 自动压缩，文档纯文本，多平台同步，易于迁移 | 需要配置图床，依赖网络，图床可能失效 | ⭐⭐⭐⭐ (博客/公开文档推荐) |
| PicGo + 图床 | 独立软件上传 | 功能极其丰富，插件生态多 | 配置繁琐，软件体验割裂，易报错，维护成本高 | ⭐ (不推荐) |
方式一：本地粘贴（零配置）
你不需要做任何设置，直接在 Markdown 编辑器里粘贴图片即可。
好处
- 操作最简单：无需任何账号注册或软件配置。
- 数据安全：图片直接落在你的项目里，你完全拥有文件，不用担心第三方图床倒闭或删图。
- 发布友好：站点发布后，从网页复制全文也能正常带图（因为图片已随站点部署）。
代价
- 迁移麻烦：复制文档给别人时，除了 Markdown 文件，还要把图片文件夹一起打包带走。
- 路径依赖：需要保证引用路径正确，文件移动后容易出现断图。
就近目录原则
图片通常会保存在当前文档同级或自动创建的 assets / images 目录里，引用使用相对路径。建议保持 Markdown 文件和图片在相对固定的位置关系。
方式二：VS Code 插件 + 图床（需要一点配置）
本模板已在 .vscode/extensions.json 推荐安装 Markdown Image 插件（打开 VS Code 会提示安装），它支持将图片上传到图床并自动插入链接。
好处
- 自动处理：图片会自动上传，且很多图床会自动压缩（例如 200KB PNG 可能压到 50KB 左右），节省带宽。
- 纯文本体验：文档中只有 URL 链接，迁移或分享时只需发送一个 Markdown 文件，随处可用。
代价
- 配置门槛：需要注册图床账号并获取 API Key。
- 依赖服务：如果图床服务商挂了，你的图片也就挂了（所以选对服务商很重要）。
推荐图床服务
在配置插件时，选择靠谱的图床至关重要。
✅ 推荐：Cloudinary
- 理由：老牌图床服务，极其稳定。
- 免费额度：免费版每月 25 Credit（约 25GB 存储/带宽），个人使用绰绰有余。
- 功能：支持强大的图片智能压缩和 CDN 加速，配置相对简单。
❌ 不推荐：腾讯云 COS / 阿里云 OSS
- 理由：虽然国内速度快，但配置极其繁琐（涉及子账号、权限策略、防盗链等）。
- 坑点：某些“智能压缩”功能有限制（如腾讯云仅限特定区域），且作为个人用户，容易因为被刷流量而产生额外费用。
插件配置指南
快捷键
- Windows：
Alt + Shift + V - macOS：
Option + Shift + V
粘贴后等待几秒，插件会自动上传并插入图片链接。
配置示例（以 Imgur 为例）
在 VS Code 设置里搜索 markdown-image，选择 uploadMethod 并填写对应参数即可。
{
"markdown-image.base.uploadMethod": "Imgur",
"markdown-image.imgur.clientId": "YOUR_IMGUR_CLIENT_ID"
}更多配置请参考插件文档： vsc-markdown-image README
进阶（可选）
全站通用图片
如果需要全站通用的图片（如 Logo、站点级截图、Favicon），建议放在 public 目录下（例如 public/images），并用 / 开头的绝对路径引用。
- 存放：
public/images/logo.png - 引用：
VS Code 其他推荐插件
为了获得更好的 Markdown 体验，模板也推荐了以下插件：
- Markdown All in One：提供快捷键、目录生成等基础功能。
- markdownlint：自动检查 Markdown 语法规范。
- Markdown Preview GitHub Styles：提供类似 GitHub 的预览样式。