[Vuejs]-Bind Image From Array To Vue

by

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>
👤Hash

0👍

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"

👤OysterD3

Leave a comment