How to add array of images from Json to img

I need to get images from this json db

{

“events”: [

  {

     "AuxID": "5006",

     "VrstaNekretnine": "Stan",

     "TipOglasa": "Prodaja",

     "Status": "Aktivan",

     "Valuta": "EUR",

     "Cena": "143900",

     "images": [

        "http://www.imperija.co.me/slike/becici-plac_1570605380931.jpg",

        "http://www.imperija.co.me/slike/becici-plac_1570605382040.jpg",

        "http://www.imperija.co.me/slike/becici-plac_1570605383558.jpg",

        "http://www.imperija.co.me/slike/becici-plac_1570605387839.jpg",

        "http://www.imperija.co.me/slike/becici-plac_1570605388505.jpg",

        "http://www.imperija.co.me/slike/becici-plac_1570605389166.jpg"

     ],

to this code:

        <div class="carousel-item active">

          <img

            src=""

          />

        </div>

Does someone has a resolution for this problem?

The v-for directive is perfect for this. You can display all images in the array just by doing something like this:

<img v-for="imageUrl in events[0].images" src="imageUrl"/>

See official v-for docs for more info.

I tried and nothing changed. When I put for example in div tag like this {{imageUrl.images}} I get Urls of those picture but in img tag when I set it, nothing happens. :frowning:

Whoops, I forgot a key detail! It should be :src="imageUrl (or v-bind:src="imageUrl"). Sorry about that!

1 Like