Linking to assets in Vuepress - vuepress

Question

I want to keep related assets in the same folder as the relevant markdown.
+-- README.md
+-- some-folder
| +-- index.md
| +-- img
| +-- example-screenshot.png
Displaying the image on the page is fine using:
![Some Alt Text](./img/example-screenshot.png)
The location of the files when vuepress build is run is updated: /assets/img/my-new-img.ac30dec4.jpg
However, if I just want a link to the screenshot the, the url isn't being processed correctly:
[See screenshot](./img/example-screenshot.png)
The link comes out as '/some-folder/img/my-new-img.jpg'
Not sure if this would be a bug, feature request, or if I'm not doing it correctly.

Answer 1

You are using a relative URL, this has as a benefit that files are compiled into Vue components and processed by webpack. Your image is basically compiled, versioned (because of caching), copied to a new directory, plus the path has been updated.
You can read more here https://vuepress.vuejs.org/guide/assets.html#asset-handling
If you don't want that to happen, you can put your images in .vuepress/public/.
Afterward, you can reference it as ![img](/example-screenshot.png) or if you use the img/ subdirectory as ![img](/img/example-screenshot.png).
It becomes slightly more difficult if you have set a custom base in your config.js. However, you can rely in that case on html with something like <img :src="$withBase('/foo.png')" alt="foo">

Answer 2

If you have the following file structure and want to keep the images in the respective folders and reference in custom components - you can also use an alias in .vuepress/config.js. I think this is helpful when you want to keep things organized per group folder rather than in the public folder.
Folder Structure
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>
Tools.vue
<template>
<div id="Tools">
<img src="~#tools/wrench/wrench.png" />
</div>
</template>