How to display image in ionic 4 using angular js

Question

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() {

  }
}

Ira Watt · Accepted Answer · 2019-06-03 13:20:00Z

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

edited Jun 3, 2019 at 13:20

answered Jun 3, 2019 at 12:44

Ira Watt

2,1552 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

sobha Over a year ago

sorry .Image is not getting displayed

Ira Watt Over a year ago

@sobha what do you mean by .Image ?

sobha Over a year ago

i am only get dwa displayed as text.I am not getting image displayed along with text

sobha Over a year ago

util.js:66 Ionic Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to a) run in a real device or simulator and b) include cordova.js in your index.html

sobha Over a year ago

i have added the image

|

Collectives™ on Stack Overflow

How to display image in ionic 4 using angular js

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related