Ionic：显示来自 http GET 请求的图像

Question

我正在使用 Ionic-2、angular-2 和打字稿。

根据我的项目要求，我想加载新闻页面中的所有图像。为此，我应该向服务器发出 http GET 请求并得到 JSON 响应。所以现在，我已经使用 angular2 的 ngFor 在我的视图中显示了来自 JSON 响应的全部数据。在 JSON 响应中，有一个缩略图属性，我需要显示该图像。缩略图包含值：/assets/images/News-Icon.png

我该怎么做。任何帮助将不胜感激。:)

我做了什么：

.html 文件包含：

<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>

Answer 1

如下更改您的 HTML 并检查它：

<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>

Answer 2

尝试使用 data-src 而不是 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>

Ionic：显示来自 http GET 请求的图像

Ionic: Display image from http GET request

typescript

ionic2

angular2-template

angular