vuepress - 链接到 Vuepress 中的 Assets

Question

我想将相关 Assets 与相关 Markdown 放在同一文件夹中。

+-- 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 .但是，在这种情况下，您可以使用诸如 <img :src="$withBase('/foo.png')" alt="foo"> 之类的内容来依赖 html。