本文共 624 字，大约阅读时间需要 2 分钟。

在学习VuePress的过程中，我遇到了一个关于heroImage路径的配置问题。默认主题的README.md文件中提到的heroImage路径让我有些困惑，于是我开始探索解决方案。

首先，VuePress遵循“约定优于配置”的原则，这意味着我们需要按照特定的目录结构来组织文件。最基本的做法是，在docs文件夹中创建一个.vuepress文件夹，并在其中再创建一个public文件夹。这样可以确保所有静态资源文件（如图片、CSS等）都位于正确的位置。

为了方便管理，我在public文件夹中创建了一个img文件夹。这样，在后续的配置过程中，我只需要在/img/路径下添加图片，就可以轻松地在文档中使用它们。例如，如果我想使用图片yy.png，只需要在Markdown文件中使用![图片名称](/img/yy.png)即可。

在配置主题时，我在themeConfig中设置了logo和heroImage的路径。具体来说，导航栏的logo配置如下：

module.exports = {  themeConfig: {    logo: '/img/yy.png',  }}

同样，heroImage的路径也设置为：

heroImage: '/img/yy.png'

这样，图片就能正确地加载并显示在文档中了。

通过以上配置，我成功解决了heroImage路径的问题。接下来，我会继续探索VuePress的更多功能，以期将自己的组件库完美地展示出来。

转载地址：http://dblo.baihongyu.com/