Linking to assets in 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.

score 13 · Answer 1 · answered Dec 20 '18 at 23:43

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

score 1 · Answer 2 · answered Feb 04 '21 at 19:54

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>

Linking to assets in Vuepress

2 Answers2