Question

我试图从请求中获取Blob响应，然后从该Blob中生成一个URL，并将该URL设置为图像的来源。

但是图像未加载。

这是我的HTML：

<img src="{{previewSignsrc}}" alt="Sign Thumbnail">

这是我的.ts文件：

this.signModalDataService.getPreviewSignature({'name': this.SignatureName, 'font_type': 0});
    this.signModalDataService.previewSignature
      .subscribe((res) => {
        console.log(res);
        let blob = new Blob([res['_body']], {type: 'image/png'});
        this.previewSignsrc = URL.createObjectURL(blob);
        this.showPreviewSign = true;
      });

我使用相同的方法为url设置了ng2-pdfviewer，并且效果很好。

Answer 1

正如 Memo 313 MediaSA 之前提到的，FileReader 可以工作。

 const reader = new FileReader();
 reader.readAsDataURL(data); //FileStream response from .NET core backend
 reader.onload = _event => {
     url = reader.result; //url declared earlier
     image.nativeElement.src = url; //image declared earlier
 };

Answer 2

您可以使用新的FileReader（）;我尝试了很多代码，这是唯一对我有用的代码。

  var reader = new FileReader ();
 reader.readAsDataURL(response) <= from inner . subscribe
  reader.onload = (_event) => {
  this.retrieveURL = reader.result;
 }

 .html
 [src]="retrieve URL"

带着我，我从手机上打字

这完全不需要使用消毒剂，希望它可以帮助到外面的人，哦，我正在使用Angular8

Answer 3

如果您使用 .Net API 中的 JsonConvert 返回一个对象，其中一个字段是图像字节 []，它会将其转换为 base64 字符串。那么在调用api或者显示图片的时候就不需要什么特别的了。

Answer 4

您可以像这样放置图像

this.config.getData()
          .subscribe((blob : any) => {
            let objectURL = URL.createObjectURL(blob);       
            this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);

          });

如果您的数据是base64这样显示

 this.config.getData()
      .subscribe((baseImage : any) => {
        let objectURL = 'data:image/jpeg;base64,' + baseImage.image;
         this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);

      });

演示https://stackblitz.com/edit/display-image-from-api

以角度查看图像的斑点响应

4 个答案: