image with caption - vuepress

Question

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="../../guides/contribute/images/typora-tela1.png" alt=""/> -->
      <img :src="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="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?

Answer 1

In markdown (without a Vue component) you can use html,

<figure>
  <img src='../../guides/contribute/images/typora-tela1.png'>
  <figcaption>Caption Example</figcaption>
</figure>

---

To make the CaptionedImage.vue component work I think you need to put the images in the /.vuepress/public/ folder.

The difference (as I understand it) is that within the markdown the image path is handled at compile time, but for the component the image path is resolved at runtime.

Anything placed in /.vuepress/public/ is available at runtime referenced from the page root.

This works for me:

project structure

<project root folder>
  docs
    .vuepress
      components
        CaptionedImage.vue
      public
        images
          myImage.jpg
    ReadMe.md

CaptionedImage.vue

<template>
  <figure>
    <img :src="imagesrc" alt=""/>
    <figcaption>Legenda: {{ caption }} - {{ src }}</figcaption>
  </figure>
</template>
<script>
export default {
  props: ['src', 'caption'],
  computed: {
    imagesrc () {
      return './images/' + this.src
    }
  }
}
</script>

ReadMe.md

<CaptionedImage src="myImage.jpg" caption="Caption Example"></CaptionedImage>