BASE64 到图像角度 2 [英] BASE64 to image angular 2
本文介绍了BASE64 到图像角度 2的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试显示从具有 angular 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" />
这就是我得到的:
推荐答案
我觉得这个帖子缺乏具体的例子,让我有一些困难:
I feel like this thread lacks concrete examples which made me have some difficulties:
导入 DomSanitizer:
Import DomSanitizer:
import { DomSanitizer } from '@angular/platform-browser';
在构造函数中定义:
constructor(private _sanitizer: DomSanitizer) { }
清理要作为图像源传递的 Base64 字符串(使用 trustResourceUrl):
Sanitize the Base64 string you want to pass as your image source (use trustResourceUrl):
this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,'
+ toReturnImage.base64string);
绑定到 html:
<img [src]="imagePath">
这篇关于BASE64 到图像角度 2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文