图片管理
在 Markdown 的世界中,图片管理确实是一个比较麻烦的事情,因为 markdown 相比 word 而言不是一个完整的文档格式,它只是一个文本文件,图片是外部资源,需要存放在其他地方。
所以如何保存我们的图片,并且让 markdown 中正确引用他们呢?
这份文档只保留最实用的结论:我们推荐两种方式管理图片,并说明各自的优缺点。
我们推荐的两种方式
- 本地粘贴(零配置)
- VS Code 插件 + 图床(需要一点配置)
方式一:本地粘贴(零配置)
你不需要做任何设置,直接在 Markdown 编辑器里粘贴图片即可。
好处
- 操作最简单。
- 图片直接落在你的项目里,你完全拥有文件,不用担心图床失效。
- 站点发布后,从网页复制全文也能正常带图。
代价
- 迁移/复制文档时,除了 Markdown 文件,还要把图片一起带走。
- 需要保证图片路径正确,否则会出现断图。
就近目录(简单说一下)
图片通常会保存在当前文档同级或自动创建的图片目录里,引用是相对路径;把 Markdown 和图片放在一起即可。
方式二:VS Code 插件 + 图床(需要一点配置)
本模板已在 .vscode/extensions.json 推荐安装 Markdown Image 插件(打开 VS Code 会提示安装),它支持将图片上传到图床并自动插入链接。
好处
- 图片会上传到图床,很多图床会自动压缩(例如 200KB PNG 可能压到 50KB 左右)。
- 文档中只有链接,迁移时只需移动 Markdown 文件。
代价
- 需要花一点时间配置。
- 部分图床可能需要付费。
支持的图床
Imgur、七牛、SM.MS、Coding 等(插件内可配置)。
快捷键
- Windows:
Alt + Shift + V - macOS:
Option + Shift + V
粘贴后等待几秒,插件会自动插入图片链接。
配置示例(Imgur)
在 VS Code 设置里搜索 markdown-image,选择 uploadMethod 并填写对应参数即可。

json
{
"markdown-image.base.uploadMethod": "Imgur",
"markdown-image.imgur.clientId": "YOUR_IMGUR_CLIENT_ID"
}更多配置请参考插件文档: https://github.com/imlinhanchao/vsc-markdown-image/blob/HEAD/README.zh-cn.md
VS Code 其他推荐插件(可选)
模板也顺带推荐了常见 Markdown 插件:Markdown All in One、markdownlint、Markdown Preview GitHub Styles。
进阶(可选)
如果需要全站通用的图片(如 Logo、站点级截图),可以放在 docs/public,并用 / 开头的绝对路径引用。