如何在Angular 6中显示以base64格式编码的图像?

时间:2019-02-03 06:20:58

标签: html angular typescript base64 angular6

我遇到了与Angular 6相关的问题,并显示以base64格式编码的图像。为什么下面显示的代码不显示图像?

html:

<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<img src="{{this.hello}}" />

ts:

this.hello = "data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."

下面显示的代码可以正常工作并显示图片吗?

html:

<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<!--<img src="data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."/>

this.hello是在构造函数中分配的,仅用于测试目的。我以this.hello = 'data:image/png;base64, ' + this.UploaderService.imageRecognitionRowsData[0].toString()的方式创建它。我的主要目标是在循环imageRecognitionRowsData中显示<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">。因此,对于第一次迭代,我将显示图像imageRecognitionRowsData[0],然后在下一次迭代期间显示图像imageRecognitionRowsData[1]等。当我添加{{1}时,this.UploaderService.tableImageRecognition.dataRows的长度始终与this.UploaderService.imageRecognitionRowsData相同。我在html中得到相同的字符串。 我不知道怎么了。我也尝试了<p>{{this.hello}}</p>this.hello2 = this.sanitizer.bypassSecurityTrustResourceUrl(this.hello);this.hello2 = this.sanitizer.bypassSecurityTrustUrl(this.hello);等,但没有任何效果。有什么想法可以解决这个问题吗?

3 个答案:

答案 0 :(得分:2)

您不要使用“ this”来引用组件“ ts”文件中定义的变量。删除“ this”可能会解决您的问题。

请查看此stackbliz Fiddle。查看应用程序组件内部以查看实现。

StackBlitz

答案 1 :(得分:1)

这是使用base64图像时对我有用的。

HTML:

<img [src]="currVerifiedLoanOfficerPhoto">

组件:

this.currVerifiedLoanOfficerPhoto = 'data:image/jpg;base64,' + (this.sanitizer.bypassSecurityTrustResourceUrl(item) as any).changingThisBreaksApplicationSecurity;

答案 2 :(得分:0)

在Angular的html模板中不要使用this。默认情况下,所有变量/成员方法都在类上解析。直接访问变量,如下所示:

<img [src]="hello" />