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

}

yes, because I manually required the url directly to the <v-img>. I want to know how ddo I fetch the image from array. — Alex Deneris
– Alex Deneris, Commented Nov 15, 2019 at 6:02

Hash · Accepted Answer · 2019-11-15 06:26:26Z

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>

answered Nov 15, 2019 at 6:26

Hash

316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OysterD3 · Accepted Answer · 2019-11-15 07:07:45Z

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"

Collectives™ on Stack Overflow

Bind Image From Array To Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related