CODEWITHSUNDEEP
angularionic4
sobha
sobha

Reputation: 175

How to display image in ionic 4 using angular js

enter image description hereI 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() {

  }
}

Upvotes: 1

Views: 975

Answers (1)

Ira Watt
Ira Watt

Reputation: 2145

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

Upvotes: 1

Related Questions