资源处理

引用静态资源

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

public 目录

• public 位置

如果项目根目录是 ./docs，并且使用默认源目录位置，那么 public 目录将是 ./docs/public。

• 引用地址

放置在 public 中的资源将按原样复制到输出目录的根目录中。因此应该使用根绝对路径来引用放置在 public 中的文件，例如：

public/icon.png 应始终在源代码中使用 /icon.png 引用。

根 URL

如果站点没有部署在根 URL 上，则需要在 .vitepress/config.js 中设置 base 选项。例如，如果计划将站点部署到 https://foo.github.io/bar/，则 base 应设置为 '/bar/'(它应始终以斜杠开头和结尾)。

静态资源路径处理

所有静态资源路径都会被 vitePress 自动处理，来适应不同的 base 配置值。

例如，如果 markdown 中有一个对 public 中的资源的绝对引用：

![An image](/image-inside-public.png)

在这种情况下，更改 base 配置值时，无需更新该引用。

动态资源路径处理

在 JS 中指定的路径为动态资源路径

例如一个图片，它的 src 基于主题配置：

<img :src="theme.logoPath" />

在这种情况下，建议使用 VitePress 提供的 withBase helper 来包括路径：

<script setup>
import { withBase, useData } from "vitepress";

const { theme } = useData();
</script>

<template>
  <img :src="withBase(theme.logoPath)" />
</template>

警告

withBase 只能在客户端使用，服务端不可使用