Linking to image from cutom component in VuePress

Question

I want to display an image in my VuePress markdown file. Normally, I'd go with:

![My Image](./resources/myimg.png)

However, I'd like to create a custom Vue component that will style the images in a specific way. Then, some images would be displayed using the "standard" markdown syntax (like above), and some others using my custom component.

With my custom component, I'd display the images like this:

<MyComponent src="./resources/myimg.png"/>

As you can see, the images are placed alongside my markdowns, in a resources directory. This makes sense for me, because the image is close to the markdown where it gets displayed. Unfortunately, the image does not get displayed when I use MyComponent. VuePress (webpack?) handles the images during build and places them in some other directory with a different name. The "standard" Markdown image reference works fine, its URL to the image is set up correctly by VuePress. However, MyComponent does not work, because the src parameter is just a string for VuePress and it does not transform it in any way.

I know that one solution would be to place my images in the /vuepress/public folder. However, I would want to keep the same organization as I have now - images alongside documents.

How can I achieve that?

Answer 1

I had the same issue.
I used the answer @papey provides for a Vue question here

Here is one thing he suggests

<template>
    <div id="app">
        <img :src="require('./assets/logo.png')"/>
    </div>
</template>
    
<script>
    export default {
    }
</script>
    
<style lang="css">
</style> 

Answer 2

You can resolve the path directly in markdown file

<MyComponent :src="require('./resources/myimg.png')" />