BASE64成像角2

本文介绍了BASE64成像角2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试从角度为2的远程服务器显示图像。

I'm trying to show an image get from a remote server with angular 2.

在我的组件中，我有一个对象是university_info对象，是我的模特。

In my component I have an object that is an "university_info" object that is my model.

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中显示它时：

All is working fine. I get base64 image but when I try to show it in HTML in this way :

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

这就是我得到的：

推荐答案

您可以尝试使用 _sanitizer .bypassSecurityTrustUrl 告诉angular src 值是安全的。从角度看这个类：

You can try to use _sanitizer.bypassSecurityTrustUrl to tell angular src value is safe. Take a look at this class from angular:

class DomSanitizationService { sanitize(context: SecurityContext, value: any) : string bypassSecurityTrustHtml(value: string) : SafeHtml bypassSecurityTrustStyle(value: string) : SafeStyle bypassSecurityTrustScript(value: string) : SafeScript bypassSecurityTrustUrl(value: string) : SafeUrl bypassSecurityTrustResourceUrl(value: string) : SafeResourceUrl }

并且低安全html的示例：

and be low an example for safe html:

export class AppComponent { private _htmlProperty: string = '<input type="text" name="name">'; public get htmlProperty() : SafeHtml { return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty); } constructor(private _sanitizer: DomSanitizationService){} }