typescript 如何在 Angular 6 中显示以 base64 格式编码的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54500483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display image encoded in base64 format in Angular 6?
提问by thedbogh
I struggle with a problem associated with Angular 6 and displaying image encoded in base64 format. Any ideas why code shown below doesn't display image?
我正在努力解决与 Angular 6 相关的问题并显示以 base64 格式编码的图像。任何想法为什么下面显示的代码不显示图像？
html:
html：
<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<img src="{{this.hello}}" />
ts:
ts：
this.hello = "data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."
While code shown below works properly and displays picture?
虽然下面显示的代码可以正常工作并显示图片？
html:
html：
<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<!--<img src="data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."/>
this.hellois assigned in the constructor just for test purpose. I create it in this way this.hello = 'data:image/png;base64, ' + this.UploaderService.imageRecognitionRowsData[0].toString()My main goal is to display imageRecognitionRowsDatain this loop <tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">. So for first iteration I would display image imageRecognitionRowsData[0]then during next iteration image imageRecognitionRowsData[1]etc. The length of this.UploaderService.tableImageRecognition.dataRowsis always the same as this.UploaderService.imageRecognitionRowsDataWhen I add <p>{{this.hello}}</p>I get the same string in html.
I have no idea what is wrong. I tried also with this.hello2 = this.sanitizer.bypassSecurityTrustResourceUrl(this.hello);, this.hello2 = this.sanitizer.bypassSecurityTrustUrl(this.hello);, <img [src]="this.hello" />etc. but nothing works. Any ideas how to solve this?
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]等期间显示图像。的长度this.UploaderService.tableImageRecognition.dataRows始终与this.UploaderService.imageRecognitionRowsData添加时相同，我<p>{{this.hello}}</p>在 html 中得到相同的字符串。我不知道出了什么问题。我也试图与this.hello2 = this.sanitizer.bypassSecurityTrustResourceUrl(this.hello);，this.hello2 = this.sanitizer.bypassSecurityTrustUrl(this.hello);，<img [src]="this.hello" />等但没有任何工程。任何想法如何解决这个问题？
回答by Richang Sharma
You don't use "this" to refer the variables defined in the component "ts" file. Remove "this" may solve your problem.
您不使用“this”来引用组件“ts”文件中定义的变量。删除“this”可能会解决您的问题。
Please Review this stackbliz Fiddle. Look inside the app component to see the implementation.
请查看此 stackbliz Fiddle。查看应用程序组件内部以查看实现。
回答by Jason Spence
This is what worked for me when working with base64 images.
这就是在处理 base64 图像时对我有用的方法。
HTML:
HTML：
<img [src]="currVerifiedLoanOfficerPhoto">
Component:
零件：
this.currVerifiedLoanOfficerPhoto = 'data:image/jpg;base64,' + (this.sanitizer.bypassSecurityTrustResourceUrl(item) as any).changingThisBreaksApplicationSecurity;
回答by Vishal Gulati
You don't use thisin html templates in Angular. All the variables/member methods are resolved on class by default. Access the variables directly as follows:
您不在thisAngular 的 html 模板中使用。默认情况下，所有变量/成员方法都在类上解析。直接访问变量如下：
<img [src]="hello" />
