CODEWITHSUNDEEP
angularcordovaionic-framework
Mustafa Lokhandwala
Mustafa Lokhandwala

Reputation: 814

Show images in list from typescript array

I have to show all images that are coming from a server as base64 strings. Thereofre I have created an array of images like this:

for (let i in json) {
        this.imageArray.push({
            imageUrl: json[i].datas
        })
     }

Now, I am trying to show these images from array in html file:

<ion-list no-lines>
   <ion-item *ngFor="let item of imageArray">
      <ion-img src="data:image/*;base64,{{item.imageUrl}}"></ion-img>
   </ion-item>
</ion-list>

But the images are not shown. What am I doing wrong?

Upvotes: 1

Views: 3023

Answers (2)

Mustafa Lokhandwala
Mustafa Lokhandwala

Reputation: 814

You have to wrote the following code

<ion-list [virtualScroll]="imageArray">

  <ion-item *virtualItem="let item">
    <ion-img src="data:image/*;base64,{{item.imageUrl}}" style="height: 300px; width: 100%;"></ion-img>
  </ion-item>

</ion-list>

and in .ts file

 for (let i in json) {
        this.imageArray.push({
          imageUrl: json[i].datas
        })
      }

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

Try this,

<ion-img *ngIf="item.imageUrl" [src]="'data:image/*;base64,'+item.imageUrl"></ion-img>

Upvotes: 1

Related Questions