angular – Ionic 3- display base64 image,清理不安全的url值sa

发布时间：2020-12-17 17:36:51 所属栏目：安全来源：网络整理

导读：我想为个人资料图片显示base64图像. 图像作为二进制数据存储在数据库中,我使用btoa()将这个二进制数据转换为base64.现在我想将这个base64图像绑定到img src 我尝试了很多方法,但它不起作用,请帮忙这是我的代码 profile.ts代码： profilePicture(binImage){

我想为个人资料图片显示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>

Check this image,it't not displaying the picture

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

解决方法

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

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!