Is it possible for me to request assistance? I'm wondering how to bind an image to a vue component or more simply, how do you render an image from an array in vue? Allow me to share my code with you and explain in detail how I have approached this.
Within my template, I have a UL that displays 3 items from an array. My goal is to display images from the array that I have set up in 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"
}
]
}
}
}