带有标题的图像 - 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/文件夹中。

不同之处（据我所知）是在 Markdown 中，图像路径在编译时处理，但对于组件，图像路径在运行时解析。

放入的任何内容/.vuepress/public/在运行时都可以从页面根引用。

这对我有用：

项目结构

<project root folder>
  docs
    .vuepress
      components
        CaptionedImage.vue
      public
        images
          myImage.jpg
    ReadMe.md

标题图片.vue

<project root folder>
  docs
    .vuepress
      components
        CaptionedImage.vue
      public
        images
          myImage.jpg
    ReadMe.md

自述文件

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