5

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

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

4

2 回答 2

5

在 markdown（没有 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>

自述文件.md

<CaptionedImage src="myImage.jpg" caption="Caption Example"></CaptionedImage>
于 2018-09-16T22:52:13.010 回答
0

感谢理查德。基于他所做的，我改变了一点。以便

  • 图像显示在中心。
  • 宽度可以很容易地改变。
  • 字幕以小尺寸和斜体显示。

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>

自述文件.md

例如：

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

这是最终的效果。

于 2020-03-03T16:05:37.603 回答