查看“VuePress静态资源”的源代码

== 相对路径 ==

你可以在你的 Markdown 内容中使用相对路径来引用静态资源：

<pre class="md">![图片](./image.png)</pre>
或

<pre class="md">![图片](image.png)</pre>
一般情况下，我们推荐你使用这种方式来引用图片，因为人们通常会把图片放在引用它的 Markdown 文件附近。

<span id="public-文件"></span>
== Public 文件 ==

你可以把一些静态资源放在 Public 目录中，它们会被复制到最终生成的网站的根目录下。

默认的 Public 目录是 <code>.vuepress/public</code> ，可以通过 public 配置项来修改。

在下列这些情况中，你可能会用到它：

* 你可能需要提供一些静态资源，但是它们并不直接被你的 Markdown 文件引用，比如 favicon 和 PWA 图标。
* 你可能想要托管一些共享的静态资源，甚至可能需要在你的网站外部引用它，比如 Logo 图片。
* 你可能想在你的 Markdown 内容中通过绝对路径来引入图片。

<span id="base-helper"></span>
=== Base Helper ===

如果你的网站部署在非根路径下，例如 <code>https://foo.github.io/bar/</code> ，那么你应该把 base 设置为 <code>'/bar/'</code>。显然，此时你的 Public 文件会被部署在 <code>https://foo.github.io/bar/images/hero.png</code> 这样的链接下。

在大多数情况下，你不需要担心这些 Public 文件的引用路径，因为 VuePress 会自动帮你处理 <code>base</code> 前缀：

<pre class="md">&lt;!-- 你不需要给 `/images/hero.png` 手动添加 `/bar/` 前缀 --&gt;
![VuePress Logo](/images/hero.png)</pre>
然而，有些情况下，你可能会有一些指向 Public 文件的动态路径，尤其是在你开发一个自定义主题的时候。在这种情况下， <code>base</code> 无法被自动处理。为了解决这个问题，VuePress 提供了withbase 工具函数，它可以帮助你添加 <code>base</code> 前缀：

<pre class="vue">&lt;template&gt;
  &lt;img :src=&quot;withBase(logoPath)&quot;&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'
import { withBase } from '@vuepress/client'

const logoPath = ref('/images/hero.png')
&lt;/script&gt;</pre>
你也可以通过 <code>$withBase</code> 来直接使用这个工具函数：

<pre class="md">&lt;img :src=&quot;$withBase('/images/hero.png')&quot; alt=&quot;VuePress Logo&quot;&gt;</pre>
== 依赖包和路径别名 ==

尽管这不是常见用法，但是你可以从依赖包中引用图片：

<pre lang="bash">npm install -D package-name</pre>
由于 Markdown 会默认将图片链接视为相对链接，你需要使用 <code>&lt;img&gt;</code> 标签:

<pre class="md">&lt;img src=&quot;package-name/image.png&quot; alt=&quot;来自依赖包的图片&quot;&gt;</pre>
在配置文件中设置的路径别名也同样支持：

<pre lang="ts">import { getDirname, path } from '@vuepress/utils'

const __dirname = getDirname(import.meta.url)

export default {
  alias: {
    '@alias': path.resolve(__dirname, './path/to/some/dir'),
  },
}</pre>
<pre class="md">&lt;img src=&quot;@alias/image.png&quot; alt=&quot;来自路径别名的图片&quot;&gt;</pre>