Home How can I able to display only the first image from images[] from the json data?
Reply: 0

How can I able to display only the first image from images[] from the json data?

user2172
1#
user2172 Published in June 19, 2018, 4:26 pm
{"status": true, "data": {"basic": {"dob": "2018-02-02", "gender": "male",  "contact": {"address": null}, "is_new": false, "is_email_verified": false, "is_phone_verified": false}, "listings": [{"pid": 109, "category": {"name": "Education"}, "location": {"lat": 10.029198696886, "lon": 76.5399751853028, "state": "Kerala", "country": "India", }, "contact": {"email": "so@gmail.com", "phone": 8547933472, "address": {"country": "India", "state": "Kerala", "name": "allen", "pincode": 686585, "streetAddress": "College of Engineering", "locality": "Kottayam", "city": "Koovappally"}}, "about": "ho are you sd dfb df sdfbgf dsfbgf dsgbf dsfbgfnh dsbgnfh dsgfn zcfvgb fgb dsfg dfcbg dsfbg sdfdgbf df","package": {"planId":4, "validity": 500}, "is_featured": false, "images": [{"url": "/listing_images/default.jgp"}, {"url": "/listing_images/1518600363.50679_jomy.jpg"}]}], "total_listings": 1}}

How can I able to display only the first image from the images[]?

Currently, I am using the code

    <div id="dash">
    <div class="col-md-4 p0" v-for="listing in data.listings">
     <div class="box-two proerty-item">
    <div class="item-thumb" v-for="ims in listing.images">
     <a v-bind:href="'/details/'+listing.pid">
<img  v-bind:src="'https://com'+ims.url"></img>
</a>
    </div>
    </div>
    </div>
    </div>

When I use this code all the images are coming. But I need to display only the first image. when i use img.url[0], it is not working. Please help me to have a solution?

My vue js code is

 <script>
dash = new Vue({
    el: '#dash',
    data: {
        data: {
        listing: {},
        },
        authType: '{{uid}}',
    },
mounted() { 

 var self = this; 
  data = {};
    data['auth-token'] = this.authType;
 $.ajax({ 
 url: "http://127.0.0.1:8000/alpha/user/profile/", 
  data: data,
type: "POST",
dataType: 'json', 
 success: function (e) { 
 if (e.status == 1) { 
  self.data = e.data;
            }
            },
        });

    },
})
</script>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.373293 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO