[Vuejs]-How to get the Images to display using v-for?

by

1👍

✅

Currently, you’re not using VueJS binding to tell your images their src, so instead of a URL, they receive the string item.url

Just replace

<img src="item.url" alt="No Image" title="Order Now" />

With

<img :src="item.url" alt="No Image" title="Order Now" />

And it should work. The : (alias of v-bind:) before src tells VueJS it’s a dynamic attribute and it must look for its value into the component context.

N.B: Don’t forget the double quotes around item.url, they’re mandatory.

4👍

You’re missing the double quotes when binding the attribute. Remember, : works just like v-bind:.

<div v-for="(item, i) in items" :key="i">
   <img
      :src="item.url"
      :alt="item.name"
      title="Order Now!"
   />

   <section>{{ item.name }}</section>
</div>

Leave a comment