如何使用 Angular 8 将图像绑定到 src 属性

Question

我需要在 UI 上绑定员工列表，这已经使用 *ngFor 完成。

现在，我想使用管道为每个员工绑定图像。 在每个员工的管道中，我必须访问服务器才能获取图像（它以 Base64 格式返回）。

问题： 当我尝试使用 subscriber 获取图像时，它不起作用。

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

在 src 属性的 UI 上我可以看到这个

src=(unknown)    

注意：

如果从 API 获取所有图像以及员工自身，则由于图像处理（从 ntnet 获取 img），响应会变得非常慢。

有没有其他最好的方法在UI上绑定动态图像而不冻结UI

Answer 1

我会尝试有一个对象数组。首先你得到用户，在使用 forkJoin 得到所有图像之后。拥有所有图像后，将值分配给属性“img”。

好吧，当你收到一个base64的图像时，你需要使用DomSatinize，所以在你的构造函数中

constructor(private sanitizer:DomSanitizer) {}

想象你有

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

你有一个类似的 .html

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

注意：我想你收到了一些类似的东西：

iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDI...

查看stackblitz中的示例

注意 2：在 stackblitz 中，我将 this.userService.GetProfileImage 替换为一个简单的 getImagen