链接到 Vuepress 中的资产

Posted 2023-02-22

【中文标题】链接到 Vuepress 中的资产

【英文标题】：Linking to assets in Vuepress

【发布时间】：2018-12-21 16:10:38

【问题描述】：

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

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

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

【参考方案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)。

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

的内容来依赖 html

【参考方案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/'
      
    
  

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