I'm having trouble figuring out how to add local images to the Buefy carousel. Is there something I'm missing? I've attempted to modify the template section to include b-image but with no success. Thank you for any help!
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>