Show images in list from typescript array

Question

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?

Sajeetharan · Accepted Answer · 2017-10-31 07:02:03Z

1

Try this,

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

edited Oct 31, 2017 at 7:02

answered Oct 31, 2017 at 5:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

Mustafa Lokhandwala Over a year ago

i have an error like this Error: Quotes are not supported for evaluation! Statement: image/*;base64,+item.imageUrl located at ng:///home/GMS/src/pages/exerciseimage/exerciseimage.html@11:17

Sajeetharan Over a year ago

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

Mustafa Lokhandwala Over a year ago

look images are come from the code that i have written in the question but the problem is that the image are come one time out of 10 time.. i hope you understand well

Sajeetharan Over a year ago

then you need to use ngIF

Mustafa Lokhandwala Over a year ago

how to do it can you please suggest me??

|

Mustafa Lokhandwala · Accepted Answer · 2017-11-04 08:57:54Z

0

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

answered Nov 4, 2017 at 8:57

Mustafa Lokhandwala

81410 silver badges22 bronze badges

Collectives™ on Stack Overflow

Show images in list from typescript array

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related