Bind Image From Array To Vue

Question

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"
            }
        ]
    }
}

}

Answer 1

Try This...

<ul class="list-rendering">
  <li v-for="item in items"  v-bind:key="item">
    <v-card style="padding: 10px;">
        <div class="img-cont">
            <img :src="item.img" alt="loading...">
        </div>
        <div class="text-cont">
            <br>
            <base-subheading>{{ item.name }}</base-subheading>
            <h5>{{ item.price }}</h5>
        </div>
    </v-card>
  </li>
</ul>

Answer 2

Try this

<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(item.img)"></v-img>
                        </div>
                        <div class="text-cont">
                            <br>
                            <base-subheading>{{ item.name }}</base-subheading>
                            <h5>{{ item.price }}</h5>
                        </div>
                    </v-card>
                </li>
            </ul>

You need require(ITEM.IMG) to render the image if you are using an alias. If you are using relative path then you can straight away use :src="item.img"