How to concatenate base64 with type in src

Question

<div *ngFor="let el of list">
        <img [src]='el.photo'
</div>

Api retturn el.photo = '/9j/2wBDAAMCAgMCAgMDAw......'

and i want concatante with

data:image/jpeg;base64,

something like that

<img [src]='data:image/jpeg;base64, + 'el.photo''>

Possible duplicate of [How to display Base64 images in HTML?](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) — R. Schifini, Jun 24 '18 at 00:08

score 3 · Accepted Answer · answered Jun 24 '18 at 00:10

Firstable it would be

<img [src]="'data:image/jpeg;base64,' + el.photo">

But I suppose it was only a mistake. However I would suggest you to make concatenations like this in controller and not in view (as a part of good coding practices). You can eg. make a function which would return concatenated string in controller:

function getBase64ImageSrc(photo) {
  return 'data:image/jpeg;base64,' + photo;
}

And then use this function in view:

<img [src]="getBase64ImageSrc(el.photo)">

score 1 · Answer 2 · answered Jun 24 '18 at 00:12

1

You can use

<img src={{'data:image/jpeg;base64, + el.photo}}>

answered Jun 24 '18 at 00:12

Muhammad Usman

9,463
18
35

How to concatenate base64 with type in src

2 Answers2