如何使用angular js在Ionic 4中显示图像

Question

我使用的是ionic4。如何使图像显示在列表中。这是我的ionic代码和hello-ionic.t角度脚本代码。

{  
   "USER":[  
      {  
         "ID":"1",
         "Password":"mo"
      },
      {  
         "ID":"111112",
         "Password":"7776"
      }
   ]
}

这是hello-ionic.ts

<ion-list>
  <ion-item *ngFor="let item of items">
    <ion-thumbnail slot="start">
      <ion-img [src]="item.src"></ion-img>
    </ion-thumbnail>
    <ion-label>{{item.text}}</ion-label>
  </ion-item>
</ion-list>

Answer 1

在您的hello-ionic.ts

        import { Component } from '@angular/core';

        @Component({
          selector: 'page-hello-ionic',
          templateUrl: 'hello-ionic.html'
        })
        export class HelloIonicPage {
          constructor() {

          }

         items = [{
  src:"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  text:"dwa"},{src:"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  text:"dwa"},{src:"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  text:"dwa"},{src:"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  text:"wda"}];

       }

此“项目”数组在html的ngFor循环中被引用。它获取每个对象并寻找其src属性，并将其馈送到[src]="item.src"

处的ion img标签中。

如果需要澄清，请发表评论