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

cnwbcb6i 于 2023-03-04 发布在 TypeScript

关注(0)|答案(4)|浏览(228)

我遇到了一个与Angular 6和显示base64格式编码的图像相关的问题。你知道为什么下面显示的代码不显示图像吗？
网页：

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

测试：

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

下面显示的代码是否正常工作并显示图片？
网页：

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

在构造函数中赋值，只是为了测试，我是这样创建的，我的主要目标是在这个循环中显示，所以在第一次迭代中，我会显示图像，然后在下一次迭代中，显示图像。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" />等，但没有工作。有什么想法如何解决这个问题？

typescript

来源：https://stackoverflow.com/questions/54500483/how-can-i-display-image-encoded-in-base64-format-in-angular-6

4条答案

按热度按时间

aij0ehis1#

不要使用“this”来引用组件“ts”文件中定义的变量。删除“this”可能会解决问题。
请查看这个stackbliz Fiddle。看看里面的应用程序组件，看看实现。
StackBlitz

赞(0）回复(0）举报 2023-03-04

hwamh0ep2#

这就是我在使用base64图像时的效果。
超文本：

<img [src]="currVerifiedLoanOfficerPhoto">

组件：

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

赞(0）回复(0）举报 2023-03-04

8iwquhpp3#

Angular中的html模板没有使用this，默认所有变量/成员方法都解析在类上，直接访问变量如下：

<img [src]="hello" />

赞(0）回复(0）举报 2023-03-04

b5buobof4#

convertToImage() {
const img = new Image();
img.src = `data:image/jpeg;base64,${image}`;
this.imageUrl = img.src;}

在image变量中传递base64代码

赞(0）回复(0）举报 2023-03-04

我来回答

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

4条答案

相关问题

热门标签

最新问答