javascript - 带标题的图片 - vuepress

Question

我正在尝试在 vuepress 中创建一个组件来显示带有标题的图像。当我对图像路径进行硬编码时，图像会出现，但这样我就不会有可重用的组件。我已经尝试使用 Prop ，但它也不起作用。

这是我已经尝试过的方法:

<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" />但图像没有出现。

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

Answer 1

在 markdown 中(没有 Vue 组件)你可以使用 html，

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

---

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

区别(据我所知)是在 markdown 中图像路径在编译时处理，但对于组件，图像路径在 < strong>运行时。

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

自述文件

<CaptionedImage src="myImage.jpg" caption="Caption Example"></CaptionedImage>