I am unable to figure out how to add local images to buefy carousel. Is there something I am doing wrong? I have tried to modify template section to include b-image but no use. Thanks

Code:

<template>
    <b-carousel>
        <b-carousel-item v-for="(carousel, i) in carousels" :key="i">
            <section :class="`hero is-medium`">
                <div class="hero-body has-text-centered">
                    <b-image>{{carousel.image}}</b-image>
                </div>
            </section>
        </b-carousel-item>
    </b-carousel>
</template>

<script>
export default {
    data(){
        return {
            carousels: [
                {
                    title: 'Slide 1',
                    image: require("@/assets/img1.png")
                },                {
                    title: 'Slide 2',
                    image: require("@/assets/img2.png")
                },
                {
                    title: 'Slide 3',
                    image: require("@/assets/img3.png")
                },
            ]
        }
    }
}
</script>