我想为个人资料图片显示base64图像.
图像作为二进制数据存储在数据库中,我使用btoa()将这个二进制数据转换为base64.现在我想将这个base64图像绑定到img src
我尝试了很多方法,但它不起作用,请帮忙
这是我的代码
图像作为二进制数据存储在数据库中,我使用btoa()将这个二进制数据转换为base64.现在我想将这个base64图像绑定到img src
我尝试了很多方法,但它不起作用,请帮忙
这是我的代码
profile.ts代码：
profilePicture(binImage)
{
if(binImage != null)
{
var imageData = btoa(binImage);
//console.log("Base64 Image: ",imageData);
this.displayImage = imageData;
}
}
profile.HTML代码：
<div class="profile-picture big-profile-picture" *ngIf="displayImage">
<img src="data:Image/*;base64,{{displayImage}}">
</div>
解决方法
在模板中使用之前,添加清洁剂并清理网址
import { DomSanitizer } from '@angular/platform-browser';
...
constructor( private sanitizer: DomSanitizer,.... ) {}
...
profilePicture(binImage)
{
if(binImage != null)
{
var imageData = btoa(binImage);
//console.log("Base64 Image: ",imageData);
this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
}
}
在你的模板中：
<div class="profile-picture big-profile-picture" *ngIf="displayImage">
<img src="{{displayImage}}">
</div>
