Vue.js Buefy carousel, adding local images-CodePudding

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 :>
                <div >
                    <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>

CodePudding user response：

b-image tag takes src as prop which you can use to render your image. Try modifying the b-image part to the below code

<b-image :src="carousel.image" />