4  图片管理与文件输出

这一章解决新手最容易卡住的两个问题：

  1. 图片怎么管理，才不会到处找不到、输出后又消失？
  2. PDF 和 HTML 有什么区别，我该输出哪种？

答案其实很简单。先给你结论：

初学者默认推荐：本地图片 + Fig/ 文件夹 + 输出 PDF。

下面来解释为什么，以及怎么做。

4.1 推荐方案：本地 Fig/ 文件夹

4.1.1 建立项目文件夹结构

每次开始一个新项目（比如一门课的幻灯片），建议建这样一个文件夹结构：

my_slides/
├── slides.md          ← 你的 Marp 文件
└── Fig/               ← 所有图片放这里
    ├── chart1.png
    ├── diagram.png
    └── photo.jpg

步骤：

  1. 在你喜欢的位置新建一个文件夹，比如叫 my_slides
  2. 在这个文件夹里新建 slides.md
  3. 在这个文件夹里新建一个子文件夹叫 Fig
  4. 把所有要用的图片都放进 Fig/

就这些。非常简单。

4.1.2 在 Marp 里用相对路径插图

在 slides.md 里，插图时用相对路径：

![图片说明](./Fig/chart1.png)

![width:60%](./Fig/diagram.png)

./Fig/chart1.png 的意思是：“从 slides.md 所在的文件夹出发，进入 Fig 子文件夹，找 chart1.png。”

为什么叫”相对路径”？

因为路径是相对于你的 .md 文件位置来写的，不是写死的完整路径（如 C:\Users\zhang\Desktop\...）。

相对路径的好处是：整个项目文件夹移动到哪里都没事，图片都能找到。

4.1.3 在 VS Code 里打开整个文件夹

建议用 VS Code 的”打开文件夹”而不是”打开文件”：

  • 菜单 File → Open Folder，选择 my_slides 这个文件夹
  • 左侧的文件资源管理器里可以看到所有文件
  • 这样也方便你管理图片和文件

4.2 为什么 PDF 更适合本地图片

输出 PDF 时，Marp 会把图片直接嵌入到 PDF 文件里。这意味着：

  • 你只需要发送一个 .pdf 文件
  • 对方打开时，图片都在里面，不会丢
  • 任何设备都能打开，不依赖插件或网络

PDF 是本地图片方案的最佳搭档。

4.2.1 如何导出 PDF

  1. 在 VS Code 里打开 slides.md
  2. 按 Ctrl+Shift+P（Mac：Cmd+Shift+P）
  3. 输入 Marp: Export，选择 Marp: Export Slide Deck…
  4. 在保存对话框里，文件类型选 .pdf，点保存
  5. 等几秒，PDF 就好了
PDF 导出很慢？

正常的。Marp 导出 PDF 用的是 Chromium（Chrome 浏览器内核），第一次可能需要下载，之后就快了。

如果等了超过 2 分钟还没反应，可以试试重新打开 VS Code 再导出。

4.3 HTML 输出时怎么处理图片

HTML 输出比 PDF 稍微复杂一点，需要特别注意。

4.3.1 本地图片 + HTML = 不能只发一个文件

当你用本地图片、输出 HTML 时，图片不会被嵌入到 HTML 文件里。HTML 文件只是记录了”图片在 ./Fig/chart.png 这个位置”，但图片本身还是单独存在的。

这意味着：如果你只发出 slides.html 这个文件，对方打开时图片会消失。

4.3.2 正确的 HTML 分享方式

如果一定要分享 HTML，需要把整个项目文件夹一起发出去：

my_slides/          ← 把这整个文件夹压缩发出去
├── slides.html     ← 导出的 HTML 文件
└── Fig/
    ├── chart1.png
    └── diagram.png

对方解压后，在自己电脑上打开 slides.html，图片就能正常显示。

小结
  • 分享给别人看 → 用 PDF，发单个文件，最省心
  • 需要在网页上展示（比如放到网站上）→ 再考虑 HTML，或者考虑图床

4.4 图床简介：什么时候才需要它

如果你经常需要把 HTML 版幻灯片分享到网上，或者你的图片很多、每次都要带着文件夹很麻烦，这时候可以考虑图床。

4.4.1 图床是什么？

图床是一种在线图片存储服务。你把图片上传上去，它给你一个链接，你在 Marp 里直接用这个链接：

![图片描述](https://example.com/img/chart1.png)

这样，图片就存在网上了。不管你发出去的是 PDF 还是 HTML，图片都能正常显示（只要有网络）。

4.4.2 常用图床

服务 特点
GitHub + jsDelivr 免费、稳定，适合技术用户
阿里云 OSS 付费但稳定，适合长期使用
微博/微信图床 不推荐，链接可能失效
SM.MS 免费，小图可用

4.4.3 为什么图床不是初学者的默认方案？

  • 需要额外注册账号、学习上传流程
  • 图片链接可能失效（特别是免费服务）
  • 本地图片 + PDF 已经能解决 90% 的需求

等你熟悉了 Marp 基本操作，有在线分享的持续需求，再考虑图床。

4.5 本章决策小结

我要分享幻灯片
├── 直接发文件给别人看
│   └── 用 PDF ← 推荐，最简单
└── 放到网页上 / 在线展示
    ├── 不怕麻烦，带着图片文件夹一起
    │   └── 用 HTML + Fig/ 文件夹
    └── 希望只有一个链接
        └── 考虑图床 + HTML

本章小结

这一章你学会了：

  • 用 slides.md + Fig/ 文件夹的结构管理本地图片
  • 用相对路径 ./Fig/xxx.png 插图
  • 明白了为什么 PDF 是本地图片的最佳搭档
  • 明白了 HTML 输出时图片的注意事项
  • 了解了图床的基本概念和适用场景

记住：初学阶段，本地图片 + PDF 输出，最省心。

下一章，我们来聊这本书最重要的话题：如何借助 AI 让自己持续进步。