CODEWITHSUNDEEP
angulartypescriptionic2angular2-template
Hiren Gohel
Hiren Gohel

Reputation: 5042

Ionic: Display image from http GET request

I am using Ionic-2, angular-2 and typescript.

As per my project requirement, i want to load all images in news page. For that, i should make http GET request to server and i get the JSON response. So now, i already displayed the whole data from JSON response in my view using angular2's ngFor. In JSON response, there is one of thumbnail property and i need to display that image. Thumbnail contains value: /assets/images/News-Icon.png

How i can do this. Any help will be thankful.:)

What i have done:

.html file contains:

<ion-list>
<ion-item *ngFor="let news of news" (click)="newsDetail(news.id)">
  <ion-thumbnail item-left>
    <img src="news.thumbnail">
  </ion-thumbnail>
  <h2 [innerText]="news.title"></h2>
  <p>{{news.author}}</p>
</ion-item>

Upvotes: 0

Views: 6748

Answers (2)

AishApp
AishApp

Reputation: 4162

try using data-src instead of src.

<ion-list> 
 <ion-item *ngFor="let news of news" (click)="newsDetail(news.id)">
  <ion-thumbnail item-left>
    <img data-src="{{news.thumbnail}}">
  </ion-thumbnail>
  <h2 [innerText]="news.title"></h2>
  <p>{{news.author}}</p>
 </ion-item>
</ion-list>

Upvotes: 1

ranakrunal9
ranakrunal9

Reputation: 13558

Change your HTML as below and check it :

<ion-item *ngFor="let news of news" (click)="newsDetail(news.id)">
  <ion-thumbnail item-left>
    <img [src]="news.thumbnail">
  </ion-thumbnail>
  <h2 [innerText]="news.title"></h2>
  <p>{{news.author}}</p>
</ion-item>

Upvotes: 1

Related Questions