如何使用angular js在Ionic 4中显示图像 [英] How to display image in ionic 4 using angular js

问题描述

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

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>

这是hello-ionic.ts

This is hello-ionic.ts

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

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

  }
}

推荐答案

在hello-ionic.ts中

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

       }

此"items"数组在html的ngFor循环中被引用.它获取每个对象并寻找其src属性，并将其提供给您的ion img标签. [src] ="item.src"

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

这篇关于如何使用angular js在Ionic 4中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！