带有标题的图像 - vuepress

Posted 2023-02-17

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

我该如何解决这个问题？是否可以仅使用降价来执行此操作？

答案

在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

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.面对

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