Template slot in buefy carousel showing broken image

Question

Hi i am newbie in vuejs and buefy. I wanted to do a carousel. However its already printing in the b-carousel-item but in template slot="indicators" it showing broken image. Can anyone help me i want to show the image also in the template slot

this is the code:

https://codesandbox.io/s/wonderful-gagarin-5wc8d?file=/src/App.vue

App.vue

<template>
  <b-carousel :indicator-inside="false">
    <b-carousel-item v-for="(item, i) in imgurl" :key="i">
      <span class="image">
        <img :src="getImgUrl(item)" />
      </span>
    </b-carousel-item>
    <template slot="indicators" slot-scope="props">
      <span class="al image">
        <img :src="getImgUrl(props.item)" :title="props.item" />
      </span>
    </template>
  </b-carousel>
</template>

<script>
export default {
  data() {
    return {
      thumbs: null,
      imgurl: [
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTE7e4ENLA4IRiYClFOOyc418WmdNTuWAAX_A&usqp=CAU",
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrMMLeNArJ-NmM-sRGGGr0ya8y0NSF4HZ8Aw&usqp=CAU",
      ],
    };
  },
  methods: {
    getImgUrl(value) {
      this.thumbs = value;
      return `${value}`;
    },
  },
};
</script>