我遇到了与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);
等,但没有任何效果。有什么想法可以解决这个问题吗?
答案 0 :(得分:2)
答案 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" />