Bind Image From Array To Vue

Can I ask for help? How do you bind an image to a vue or simply put, how do you render an image from the array to vue? I will show you my code and How I have done it and explain it carefully to you.

Inside my template, I have this UL that displays 3 items inside my array. I wanted to retrieve my images from the array that I created on my javascript code.

<ul class="list-rendering"> <li v-for="item in items" v-bind:key="item"> <v-card style="padding: 10px;"> <div class="img-cont"> <v-img :src="require('@/assets/section/about.jpg')"></v-img> </div> <div class="text-cont"> <br> <base-subheading>{{ item.name }}</base-subheading> <h5>{{ item.price }}</h5> </div> </v-card> </li> </ul> export default { data () { return { items: [ { img: "@/assets/section/about.jpg", name: "Cuppy Cake", price: "$20.00" }, { img: "@/assets/section/social.jpg", name: "Red Velvet Cake", price: "$4.99" }, { img: "@/assets/section/testimonials.jpg", name: "Carrot Cake", price: "$3.00" } ] } } 

}