Buefy 轮播模板插槽指示器显示损坏的图像

Question

嗨，我是 buefy 和 vuejs 的新手，我的 json 数组中有不同的 url 需要显示在 buefy 轮播中，但是每当我使用模板 slot="indicators" 图像显示损坏的图像。已经显示图像，但在模板 slot="indicators" 中显示损坏的图像。有人能帮我吗？谢谢

代码如下：

<b-carousel :indicator-inside="false">
    <b-carousel-item v-for="(itemss,i) in imgsplit" v-bind:prop="itemss" v-bind:key="i">
        <span class="image">
            <img v-bind:src="getImgUrl(imgsplit[i])" />
        </span>
    </b-carousel-item>

    <template slot="indicators" slot-scope="props">
        <span class="al image">
            <img :src="props.i" :title="props.i" />
        </span>
    </template>
</b-carousel>

方法

    // ...

    getImgUrl(value) {
      return value
    },

    // ...

JSON 数组的样本

[
    'https://image.shutterstock.com/image-photo/mountain-landscape-lake-range-large-260nw-1017466240.jpg',
    'https://i.pinimg.com/originals/da/1b/73/da1b7357ff266888dd43b84e9162731b.jpg',
]

Answer 1

基于他们的CodePen：

<div id="app" class="container">
    
    <b-carousel :indicator-inside="false">
        <b-carousel-item v-for="(item, i) in images" :key="i">
            <span class="image">
              <img :src="getImgUrl(i)">
            </span>
        </b-carousel-item>

        <template slot="indicators" slot-scope="props">
            <span class="al image">
                <img :src="getImgUrl(props.i)" :title="props.i">
            </span>
        </template>
    </b-carousel>

</div>

const example = {
  data: ({
    images: [
      'https://image-url/one.jpg',
      'https://image-url/two.jpg',
      'https://image-url/three.jpg',
    ],
  }),
  
  methods: {
    getImgUrl(value) {
      return this.images[value];
    }
  }
};

const app = new Vue(example);
app.$mount("#app");

Buefy 轮播模板插槽指示器显示损坏的图像

Buefy carousel template slot indicator showing broken image

vue.js

vuejs2

buefy

vuejs3