Индикатор слота шаблона карусели Buefy показывает сломанное изображение

Привет, я новичок в buefy и vuejs, у меня другой URL-адрес в моем массиве json, который необходимо отображать в карусели buefy, однако всякий раз, когда я использую индикаторы шаблона slot =, изображение показывает сломанное изображение. изображение уже отображается, но индикаторы в шаблоне slot = показывают неработающее изображение. Кто-нибудь может мне помочь? Спасибо

Вот код:

<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',
]

vue.js vuejs3 vuejs2 buefy
person TechDev    schedule 17.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На основе их 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");
person Matt Deacalion    schedule 25.10.2020