image - BASE64 到图像 Angular 2

Question

我正在尝试显示从具有 Angular 2 的远程服务器获取的图像。

在我的组件中，我有一个对象，它是一个“university_info”对象，它是我的模型。

export class myClass
{
    university_info : university_info;
}
myFunction()
{
    this.university_info = new university_info(responseFromServer[image])
}

export class university_info
{
    imageBase64 : string
    constructor(image : string)
    {
        this.imageBase64 = image
    }
}

一切正常。我得到了 base64 图像，但是当我尝试以这种方式在 HTML 中显示它时:

  <img [src]="'data:image/jpg;base64,'+university_info.imageBase64" />

这就是我得到的:

Answer 1

我觉得这个帖子缺少具体的例子，这让我有些困难:

导入 DomSanitizer:

import { DomSanitizer } from '@angular/platform-browser';

在构造函数中定义:

constructor(private _sanitizer: DomSanitizer) { }

清理要作为图像源传递的 Base64 字符串(使用 trustResourceUrl):

this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' 
                 + toReturnImage.base64string);

绑定(bind)到 html:

<img [src]="imagePath">