Skip to content

图片管理

在 Markdown 的世界中,图片管理确实是一个比较麻烦的事情,因为 markdown 相比 word 而言不是一个完整的文档格式,它只是一个文本文件,图片是外部资源,需要存放在其他地方。

所以如何保存我们的图片,并且让 markdown 中正确引用他们呢?

这份文档只保留最实用的结论:我们推荐两种方式管理图片,并说明各自的优缺点。

我们推荐的两种方式

  1. 本地粘贴(零配置)
  2. 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 并填写对应参数即可。

Markdown Image 配置示例

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 OnemarkdownlintMarkdown Preview GitHub Styles

进阶(可选)

如果需要全站通用的图片(如 Logo、站点级截图),可以放在 docs/public,并用 / 开头的绝对路径引用。