Question

我想将相关资产与相关降价标记保留在同一文件夹中。

+-- README.md
+-- some-folder
|   +-- index.md
|   +-- img
|       +-- example-screenshot.png

使用以下方法可以在页面上显示图像：

![Some Alt Text](./img/example-screenshot.png)

运行vuepress build时文件的位置已更新：/assets/img/my-new-img.ac30dec4.jpg

但是，如果我只想要链接到的屏幕截图，则说明网址未正确处理：

[See screenshot](./img/example-screenshot.png)

链接显示为“ /some-folder/img/my-new-img.jpg”

不确定这是错误，功能请求还是执行不正确。

Answer 1

您正在使用相对URL，这样做的好处是可以将文件编译成Vue组件并由webpack处理。您的映像基本上已被编译，版本控制（由于缓存），复制到新目录以及路径已更新。

您可以在此处https://vuepress.vuejs.org/guide/assets.html#asset-handling

了解更多信息

如果您不希望发生这种情况，可以将图像放在.vuepress/public/中。

此后，您可以将其引用为![img](/example-screenshot.png)，或者将img/子目录用作![img](/img/example-screenshot.png)。

如果您在base中设置了自定义config.js，将变得更加困难。但是，在这种情况下，您可以使用<img :src="$withBase('/foo.png')" alt="foo">

Answer 2

如果您具有以下文件结构并希望将图像保留在相应文件夹中并在自定义组件中引用 - 您也可以在 .vuepress/config.js 中使用 alias。我认为当您希望按组文件夹而不是在 public 文件夹中组织内容时，这会很有帮助。

文件夹结构

docs/
--.vuepress/
----/layouts/
------/Tools.vue
----/Tools
------/wrench/
--------/wrench.png
--------/README.md

config.js

configureWebpack: {
    resolve: {
      alias: {
        '@tools': '/docs/Tools/'
      }
    }
  }

自述文件

<template>
  <Layout>
    <template slot="page-top"> // this ensures you have the global navbar
      <!-- My page content here -->
    </template>
  </Layout>
</template>

<script>
import Layout from "@theme/layouts/Tools.vue";

export default {
  components: { Layout }
};
</script>

Tools.vue

<template>
  <div id="Tools">
    <img src="~@tools/wrench/wrench.png" />
  </div>
</template>

链接到Vuepress中的资产

2 个答案: