BASE64 到图像角度 2 [英] BASE64 to image angular 2

查看:32
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆