How to bind image into src attribute using Angular 8

Question

I have a requirement to bind a list of employee on UI, which is already done using *ngFor.

Now, I wanted to bind image for each employee using pipe. In pipe for every employee I have to hit the server to get the Image(it returns in Base64 format).

Problem: It's not working when I am try to get the image using subscriber.

this.userSerivce.GetProfileImage(ntnet).subscribe(img => {
      if (img !== '' && img !== undefined && img.length > 64) {
        return prefix + img;
      } else {
        return profileImage;
      }
    });

And on UI in src attribute I can see this

src=(unknown)

Note:

If getting all images along with employee it self from API then the response become very slow due to image processing (getting img from ntnet).

Is there any other best way to bind dynamic images on UI without freezing the UI

But getting image from my company's ntnet server will not work.. It won't help... — vijay sahu
– vijay sahu, Commented May 11, 2020 at 15:06
I sure it will not help but again if you guys want then I will do it... My actual issue is how to bind when you are getting base64 image using subscriber in pipe... — vijay sahu
– vijay sahu, Commented May 11, 2020 at 15:20

Eliseo · Accepted Answer · 2020-05-11 17:57:54Z

1

I'll try has an array of object. At first you get the users, after get all the images using forkJoin. When you has all the images, you asign the value to the property "img".

Well, when you received a imagen in base64, you need use DomSatinize, so in your constructor

constructor(private sanitizer:DomSanitizer) {}

Imagine you has

persons=[
{id:1,name:"Person 1",img:null},
{id:2,name:"Person 2",img:null}
...
]
//you create an array of observables
//and subscribe to forkJoin
forkJoin(this.persons.map(p=>this.userSerivce.GetProfileImage(p.id)))
.subscribe((res:any[])=>{
   //in res[0] you has the image of the first call
   //in res[1] you has the image of the second call
   //....
   res.forEach((img,index)=>{
     this.persons[index].img=
         this.sanitizer.bypassSecurityTrustUrl("data:image/png;base64," + img) 
   })
 })

you has an .html like

<div *ngFor="let person of persons">
   <img *ngIf="person.img" [src]="person.img"/>{{person.name}}
</div>

NOTE: I imagine you received some like:

iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDI...

see an example in stackblitz

NOTE2: In the stackblitz I replace the this.userService.GetProfileImage by a simple getImagen

edited May 11, 2020 at 17:57

answered May 11, 2020 at 17:37

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

4 Comments

vijay sahu Over a year ago

Perfect answer... just one question, once the img occurred for each emp, can't we map these imgs with each emp based on their EmpId instead of using index.

Eliseo Over a year ago

I dont' understand so much. You has two arrays, one with the persons and one with the images. As we are mapped the array of persons to an array of Observables and use forkJoin, the array of images are ordered, res[0] is the response to getImagen(persons[0].id), res[1] is the response to getImagen(persons[1].id)... You can relationate the res[index] with persons[index]

vijay sahu Over a year ago

Got your point, I was just little worried about the sequence/order of EmpId and their images.. means in the end it should not mismatch....

Eliseo Over a year ago

Vijay, the images can be loaded at differents times and unordered, but only when all the images has loaded, the forkjoin "finalize" and give us the response (of course ordered). Think that sometimes you use forJoin to get differents answers, e.g. in a dbs is tipical use forkJoin to get initials tables -and use "destructuring-, some like forkJoin([getCategories(),getPersons(),getInvoices()]).subscribe(([categories,persons,invoices])=>{...})

Collectives™ on Stack Overflow

How to bind image into src attribute using Angular 8

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related