Angular 7中的unsafe：data：image / jpeg; base64，net :: ERR_UNKNOWN_URL_SCHEME

Question

  

我正在从服务获取作为base64 blob的映像，并且将绑定到   视图。但是我遇到了一个问题。如何将URL清理为   受信任的网址。我尝试过使用消毒液，但是没有运气..请帮帮我..

html代码：

"-o", "helloworld.exe"

ts代码：

<img src="data:image/jpeg;base64,{{inspectionDetails.reportImage}}" width="100%" height="100%" alt="Image" />

Answer 1

使用_sanitizer.bypassSecurityTrustUrl表示角度src值是安全的

您可以像下面那样更改代码。

导入DomSanitizer

import { DomSanitizer } from '@angular/platform-browser';

将此依赖项注入到构造函数中

constructor(private domSanitizer: DomSanitizer) { }


myReader.onloadend = (e) => {
     this.base64Image = this.domSanitizer.bypassSecurityTrustUrl(myReader.result);
     console.log(this.base64Image);
   }

Answer 2

您需要进行此更改

this.ImgUrl = 'data:image/png;base64,' + this.inspectionDetails.reportImage;

那么您的HTML将是

<img [src]="ImgUrl " width="100%" height="100%" alt="Image" />

这应该有效

编辑：

public ImgUrl = ' ';