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>

离子：从http GET请求显示图像

2 个答案: