изображение с подписью - vuepress - PullRequest
0 голосов
/ 14 сентября 2018

Я пытаюсь создать компонент в vuepress для отображения изображения с подписью. Когда я жестко кодирую путь к изображению, изображение появляется, но в этом случае у меня не будет повторно используемого компонента. Я уже пробовал с реквизитом, но он тоже не работает.

Вот как я уже пробовал:

<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>

На моем README.md я вызываю компонент следующим образом: <captioned-image src="filename.png" caption="Caption Example" />, но изображение не появляется.

Как я могу исправить эту проблему? Можно ли сделать это только с уценкой?

1 Ответ

0 голосов
/ 17 сентября 2018

В уценке (без компонента 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>
...