将 Blob 转换为图像 url 并在图像 src 中使用以显示图像

如何将 blob 转换为 base64/image？
我通过 API 调用获取此 blob，并尝试将其显示在
图像。我尝试过 stackoverflow 的答案，但没有任何帮助，所以
我刚刚尝试过这个。

//Angular 5 code  
imageSrc;//global variable  
data = [{"image_blob":{"type":"img/jpg","data":[123,125]}}];//from api  
var blob1 = new Blob([new Uint8Array(data[0].image_blob.data)]);  
const imageUrl = URL.createObjectURL(blob1);  
console.log(imageUrl);//blob:http://localhost:8100/c489.etc  
this.imageSrc = imageUrl;  

<!-- html code -->  
<img [src]='imageSrc' alt="image">  

错过了什么。请建议

生成base64字符串：

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
   base64data = reader.result;     
}

获得后，生成要放入图像中的字符串src与 Angular 消毒剂。例子：

import { DomSanitizer } from '@angular/platform-browser';
constructor( ... private sanitizer : DomSanitizer ...){}

public myFunction() : void {
    let mySrc = this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,' + base64data);
}

您可以修改类型'data:image/png;base64,'根据您的需要。

最后，将其放入您的图像中：

<img [src]="mySrc" />