How to display image in ionic 4 using angular js

问题

I am using ionic 4.How to make image appear in a list.Here is my ionic code and hello-ionic.t angular script code.

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

This is hello-ionic.ts

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

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

  }
}

回答1:

In your 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"}];

       }

This 'items' array is referred to in your ngFor loop in your html. it takes each object and looks for its src property and feeds it to your ion img tag here [src]="item.src"

comment if this needs clarification

来源：https://stackoverflow.com/questions/56427414/how-to-display-image-in-ionic-4-using-angular-js

标签

angular

ionic4