В уценке (без компонента Vue) вы можете использовать HTML,
<figure>
<img src='../../guides/contribute/images/typora-tela1.png'>
<figcaption>Caption Example</figcaption>
</figure>
Чтобы компонент CaptionedImage.vue
работал, я думаю, вам нужно поместить изображения в папку /.vuepress/public/
.
Разница (насколько я понимаю) состоит в том, что в уценке путь к изображению обрабатывается в время компиляции , но для компонента путь к изображению разрешен в время работы .
Все, что помещено в /.vuepress/public/
, доступно во время выполнения, на которое ссылается корень страницы.
Это работает для меня:
структура проекта
<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>