前言

所有的Markdown文件都通过Vite处理编译成Vue组件。你可以并且应当使用相对URL引用静态资源。

![An image](./image.png)

你可以在你的Markdown文件、主题中的*.vue组件、样式和纯.css文件使用绝对公共路径(基于项目根目录)或相对路径(基于你的文件系统)。如果你使用过vue-cli或webpack的file-loader，后者更符合你的习惯。

常见的图片、媒体和字体文件类型会作为静态资源自动检测和包含。

所有被引用的静态资源，包括使用绝对路径的资源，在生产构建中会被复制到dist文件夹中，并重命名为hash文件名的文件。没有被引用的静态资源会被被复制。类似于vue-cli，小于4kb的图片资源会转化为内联的base64字符。

所有静态路径引用，包括绝对路径，应当基于你的工作目录结构。

Public目录

有时候，你可能需要提供在你的Markdown或主题文件都没有直接引用的静态资源(如favicons和PWA 图标)。在项目根目录下的public目录可以用作转换舱口提供在源代码中没有引用的静态资源(如robots.txt)或必须保留完全相同文件名(没有hash)的文件。

存放在public下的静态资源将原样复制到dist目录的根目录。

注意，你应该使用==根绝对路径引用==放置在public文件夹中的文件。例如，文件public/icon.png在源代码中应该始终作为/icon.png被引用。

根 URL

如果你的站点部署在非根URL，你需要在 .vitepress/config.js中设置base选项。例如，如果你计划部署你的站点到https://foo.github.io/bar/，base选项就应该设置为'/bar/'(始终以/开始和结尾)。

设置基础URL后，为了引用public中的图像，你就需要使用类似/bar/image.png的URL。 但是，当你觉得改变base值时，这样会很脆弱。 为此，VitePress提供了一个内置的助手$withBase(注入在Vue原型上)，用于生成正确的路径：

<img :src="$withBase('/foo.png')" alt="foo" />

注意，你不仅可以在主题组件中使用以上语法，还可以在Markdown文件中使用。

总结

静态资源：推荐放入 /docs/public 文件夹中。随后在 md 中使用时以 ![image](/images/xxx.png)。 / 以 public 开始。

路径配置规则：以 /docs 为根目录，进行配置；/ 以 docs 开始。示例：

  themeConfig: {
    // link 点击时跳转的默认地址
    // activeMatch 保证无论左侧边栏如何切换，'指导'导航都处于高亮状态
    nav: [{ text: '指导', link: '/guide/what-is-vitepress', activeMatch: '/guide' }],
    sidebar: {
      '/guide/': [
        {
          text: '介绍',
          items: [
            { text: '什么是 VitePress', link: '/guide/what-is-vitepress' },
            { text: '快速开始', link: '/guide/getting-started' },
            { text: '配置', link: '/guide/configuration' },
            { text: '发布', link: '/guide/deploying' }
          ],
          collapsible: true
        }
      ]
    }
  }