带标题的图片 - vuepress

Question

我正在尝试在 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" /> 但图像没有出现。

我该如何解决这个问题？是否可以仅使用降价来做到这一点？

Answer 1

在 markdown 中（没有 Vue 组件）你可以使用 html,

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

要使 CaptionedImage.vue 组件正常工作，我认为您需要将图像放在 /.vuepress/public/ 文件夹中。

区别（据我所知）是在降价中图像路径在编译时处理，但是对于组件图像路径在 runtime 解析。

放在 /.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>

Answer 2

感谢理查德。根据他所做的，我改变了一点。这样

图片显示在中间。
宽度可以很容易地改变。
标题以小号和斜体显示。

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'],
  computed: {
    imagesrc () {
      return  this.src
    }
  }
}
</script>

ReadMe.md

例如：

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

Here is the final effect.

带标题的图片 - vuepress

image with caption - vuepress

javascript

vue.js

vuepress