Base64图像来自[src]但未在角度2 UI中渲染 [英] Base64 image coming in [src] but not rendering in the angular 2 UI

问题描述

i am binding a base64 image to the UI.which is in a loop.but image is not binding,while inspect element i can c the image but not rendering

Db没有返回

Db is not returning

data:image/jpg;base64,

所以我添加了html



同时检查elenment im

so i added in html

while inspect elenment im getting

"data:image/jpeg;base64,/9j/4A

但它不是渲染。任何想法????



我的尝试：

but it is not rendering.Any Idea????

What I have tried:

<pre><td>
<span>{{ m.Name }}</span>
</td>
<td>
<!--<img style="width:100px;height:100px" [src]="imageData1">-->
<img [src]="'data:image/jpg;base64,'+m.ImageData" style="height:50px;width:50px" />
</td>
<td>
<span>{{m.Age }}</span>

推荐答案

使用 _sanitizer.bypassSecurityTrustUrl 告诉角度src值是安全的



你可以改变你r代码如下。



导入DomSanitizer

Use _sanitizer.bypassSecurityTrustUrl to tell angular src value is safe

You can change your code like below.

Import DomSanitizer

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

将此依赖项注入构造函数

Inject this dependency in to the contructor

constructor(private domSanitizer: DomSanitizer) { }

myReader.onloadend = (e) => {
     this.base64Image = domSanitizer.bypassSecurityTrustUrl(myReader.result);
     console.log(this.base64Image);
   }

这篇关于Base64图像来自[src]但未在角度2 UI中渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！