首页 > 解决方案 > 如何以角度 9将字节 [] 渲染为图像

问题描述

我无法将我的 byte[] 渲染到图像上。我找到了各种解决方案,但到目前为止,没有人在 Angular 9 中为我工作。

图像模型

export class Image {
    id: string
    imageName:  string
    imageData: any
    message: string
}

.ts 文件

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
import { Service} from 'src/app/services/Service.service';

constructor(private service: Service, private sanitizer: DomSanitizer) { }

image: Image;
imgRecourse: SafeResourceUrl;

this.service.getImage(imageId).subscribe(
      data => {
        this.image = data as any;
        this.imgRecourse = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' + this.image.imageData);
      }
    )

HTML

<div class="picture" *ngIf="imgRecourse">
   <img id="img" src="{{imgRecourse}}">
</div>

它在每个解决方案中都向我显示了一个警告,即

core.js:6901 WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding: data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAQ4B4ADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAEC...

请帮帮我

谢谢。

标签: htmlangular

解决方案


 <div class="picture" *ngIf="imgRecourse">
     <img id="img" [src]="imgRecourse">
  </div>

推荐阅读