I'm trying to create a ponent 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 ponent. 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'],
puted: {
    imagesrc () {
      return '../../guides/contribute/images/' + this.src // this.image
    }
  }
...
</script>

On my README.md I call the ponent 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?

I'm trying to create a ponent 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 ponent. 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'],
puted: {
    imagesrc () {
      return '../../guides/contribute/images/' + this.src // this.image
    }
  }
...
</script>

On my README.md I call the ponent 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?

• javascript
• vue.js
• vuepress

• Please check a working example in codepen codepen.io/anon/pen/vzaWvO i believe it might be an issue with the path that prepend (might not be correct). – gijoe Commented Sep 14, 2018 at 17:51
• If I pass the full URL in src props my code works, but I need to use the image inside my project (I don't know the full URL for the image). Thanks for your example – Vitor Carvalho Commented Sep 17, 2018 at 11:42

2 Answers 2

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

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

To make the CaptionedImage.vue ponent 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 pile time, but for the ponent 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
      ponents
        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'],
  puted: {
    imagesrc () {
      return './images/' + this.src
    }
  }
}
</script>

ReadMe.md

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

Thanks to Richard. Based on what he did, I changed a little. So that

• image shows in the center.
• width can be changed very easily.
• caption show in small size and italic font.

Cimg.vue

<template>
  <figure align='center'>
    <img :src="imagesrc" :width="width" alt=""/>
    <figcaption><i><small>{{ caption }}</small></i></figcaption>
  </figure>
</template>

<script>
export default {
  props: ['src', 'caption', 'width'],
  puted: {
    imagesrc () {
      return  this.src
    }
  }
}
</script>

ReadMe.md

For example:

<Cimg src='/images/ml/GAN/永野芽郁.jpg' width='100%' caption="《半分、青い》 玲爱"/>

Here is the final effect.