首页 文章

带有 Headers 的图像 - vuepress

提问于
浏览 次
1

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

这是我已经尝试过的方式：

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

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

javascript vue.js vuepress

1 回答

  • 1

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

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

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

    差异（据我所知）是在降价处，图像路径在 compile time 处理，但对于组件，图像路径在 runtime 处解析 .

    /.vuepress/public/ 中的任何内容都可以在页面根目录中引用的运行时获得 .

    这对我有用：

    project structure

    <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>
    回复于

相关问题