📦 资源（图片/视频/附件）使用示例

本页演示在 VuePress 中如何存放与引用资源文件（图片、视频、PDF、Word、Zip 等）。

推荐放置位置

把资源统一放在：

• docs/.vuepress/public/

例如：

• docs/.vuepress/public/images/
• docs/.vuepress/public/videos/
• docs/.vuepress/public/files/

放在 public 下的资源会被拷贝到站点根目录，因此在 Markdown 中使用 以 / 开头 的路径引用。

图片

存放

• docs/.vuepress/public/images/demo.png

引用

![演示图片](/images/demo.png)

文档下载（PDF/Word/Excel/Zip）

存放

• docs/.vuepress/public/files/使用手册.pdf
• docs/.vuepress/public/files/template.docx
• docs/.vuepress/public/files/data.xlsx
• docs/.vuepress/public/files/package.zip

引用

[下载：使用手册 PDF](/files/使用手册.pdf)
[下载：Word 模板](/files/template.docx)
[下载：Excel 数据表](/files/data.xlsx)
[下载：压缩包](/files/package.zip)

视频（MP4）

存放

• docs/.vuepress/public/videos/intro.mp4

引用（推荐：HTML video 标签）

<video controls style="max-width: 100%;">
  <source src="/videos/intro.mp4" type="video/mp4" />
  你的浏览器不支持 video 标签
</video>

注意事项（避免 404）

• 路径必须以 / 开头，例如 /images/demo.png
• 文件名建议用英文/数字/短横线
  • 中文文件名在某些部署环境会被编码，偶尔会导致链接不一致
• 新增/替换资源后若浏览器仍显示旧内容：
  • 尝试强刷 Ctrl + F5
  • 或重启 npm run dev