CODEWITHSUNDEEP
javascripthtmlvue.js
Michael Ganschow
Michael Ganschow

Reputation: 3

VUE JS Picture bind from array

I am looking to bind some pictures to an img element from an array of objects. I can get the strings to go over to the html elements, but I am having trouble with the pictures. any help would be great. Here is my github account because I couldnt get the javascript to show up right on the template and didnt want it to be difficult to read.

https://github.com/UgotGoosed/Vue-Shopping-Cart

Upvotes: 0

Views: 1500

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

In your index.html file change

<img class="group list-group-image" src="" alt="" />

to

<img class="group list-group-image" v-bind:src="product.img" alt="" />

Upvotes: 0

Richard
Richard

Reputation: 15

Try using :src="require(path/to/image)".

As a note. :src="" is the shorthand for v-bind:src="" i think.

Like this example:

<figure class="meals-showcase-list-item">
      <img
        class="meals-showcase-list-item-photo"
        :src="require('../../assets/images/' + meal.image)"
        :alt="meal.description">
    </figure>

and in the component data, i have an array of the image sources:

data () {
  return {
    meals: [
      { image: '1.jpg', description: 'Korean bibimbap with egg and vegetables' },
      { image: '2.jpg', description: 'Simple italian pizza with cherry tomatoes' },
      { image: '3.jpg', description: 'Chicken breast steak with vegetables' },
      { image: '4.jpg', description: 'Autumn pumpkin soup' },
      { image: '5.jpg', description: 'Paleo beef steak with vegetables' },
      { image: '6.jpg', description: 'Healthy baguette with egg and vegetables' },
      { image: '7.jpg', description: 'Burger with cheddar and bacon' },
      { image: '8.jpg', description: 'Granola with cherries and strawberries' }
    ]
  }
}

Upvotes: 1

Related Questions