离子3-显示base64图像,清理不安全的url值safevalue必须使用[property] = binding

Question

我想为个人资料图片显示base64图像.图像作为二进制数据存储在数据库中,我使用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>

它显示错误"清理不安全的url值safevalue必须使用[property] = binding"

Answer 1

在模板中使用之前添加消毒剂并清理网址

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>