链接到 Vuepress 中的资产

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

但是，如果我只想要屏幕截图的链接，则 url 未正确处理：

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