json image Angular framework

Question

i export data from json to the text is show and everything good in HTML but when i need to export the image from json I can't show it in HTML

how can I put this image JSON in ionic framework

https://jsonplaceholder.typicode.com/photos

"thumbnailUrl": "http://placehold.it/150/771796"

my codes for the rest api provider

getImg() {
  return new Promise(resolve => {
    this.http.get(this.apiUrl+'/photos').subscribe(data => {
      resolve(data);
    }, err => {
      console.log(err);
    });
  });
}

page.ts

  getImg() {
    this.restProvider.getImg()
    .then(data => {
      this.photos = data;
      console.log(this.photos);
    });
  }

page.html

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let user of users">
      <h2>{{user.name}}</h2>
      <p>{{user.email}}</p>
      <img [src]="photo.thumbnailUrl">
    </ion-item>
  </ion-list>
</ion-content>

you are looping on users *ngFor="let user of users" and exacting an image from photos array?where you define photo in photo.thumbnailUrl? — jitender
– jitender, Commented Nov 23, 2017 at 9:29
when I Add <ion-item *ngFor="let photo of photos"> <img md-card-image src="{{photo.thumbnailUrl}}"> </ion-item> it show all images in json and it not look like in the div or element for the first item i want to put all togther in the same div or ionic card — eainet
– eainet, Commented Nov 23, 2017 at 9:38
how can i show only 1 image from json in same div for the list or item ? — eainet
– eainet, Commented Nov 23, 2017 at 9:43

Shubham Kandiyal · Accepted Answer · 2017-11-28 11:36:51Z

1

Actually you write wrong code, change photo with user, if your image exists in users array

<div *ngFor="let user of users">
      h2>{{user.name}}</h2>
      <p>{{user.email}}</p>
      <img [src]="user.thumbnailUrl">
</div>

and if your image exists in photo array, then code is something like below...

<div *ngFor="let user of users">
      h2>{{user.name}}</h2>
      <p>{{user.email}}</p>
</div>
<div *ngFor="let photosrc of photo">
      <img [src]="photosrc.thumbnailUrl">
</div>

Thanks

answered Nov 28, 2017 at 11:36

Shubham Kandiyal

3402 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

json image Angular framework

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related