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.
2 Answers
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' }
]
}
}
Comments
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="" />
answered Nov 22, 2017 at 0:50
Gabriele Petrioli
197k35 gold badges275 silver badges331 bronze badges