Categories
javascript vue.js vuepress

image with caption – vuepress

I’m trying to create a component in vuepress to display an image with its caption. When I hardcode the image path, the image appears but this way I will not have a reusable component. I already try with props, but it doesn’t work either.

Here is how I already tried:

<template>
<figure>
<!-- <img src="https://www.faqcode4u.com/faq/519124/guides/contribute/images/typora-tela1.png" alt=""/> -->
<img :src="https://www.faqcode4u.com/faq/519124/imagesrc" alt=""/>
<figcaption>Legenda: {{ caption }} - {{ src }}</figcaption>
</figure>
</template>
<script>
...
props: ['src'],
computed: {
imagesrc () {
return '../../guides/contribute/images/' + this.src // this.image
}
}
...
</script>

On my README.md I call the component like this: <captioned-image src="https://www.faqcode4u.com/faq/519124/filename.png" caption="Caption Example" /> but the image doesn’t appear.

How can I fix this issue? Is it possible to do this with markdown only?