11

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

+-- 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

但是，如果我只想要一个指向屏幕截图的链接，则 url 没有被正确处理：

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

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

不确定这是否是一个错误、功能请求，或者我没有正确执行。

4

2 回答 2

11

您使用的是相对 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. 但是，在这种情况下，您可以依靠 html 之类的东西<img :src="$withBase('/foo.png')" alt="foo">

于 2018-12-20T23:43:36.853 回答
1

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

文件夹结构

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

config.js

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

自述文件.md

<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>

工具.vue

<template>
  <div id="Tools">
    <img src="~@tools/wrench/wrench.png" />
  </div>
</template>
于 2021-02-04T19:54:02.447 回答