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

Question

我想为个人资料图片显示 base64 图像。图像作为二进制数据存储在数据库中，我使用 btoa() 将此二进制数据转换为 base64。现在我想将这个 base64 图像绑定(bind)到 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

在模板中使用之前添加一个 sanitizer 并 sanitizer url

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>