以角度查看Blob响应为图像 [英] View blob response as image in angular

问题描述

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

I am trying to get a blob response from a request, and then generate a URL from that blob and set this URL as an image's source.

但是图像未加载.

这是我的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，并且效果很好.

I used same method to set url for ng2-pdfviewer and it worked fine.

推荐答案

您可以像此代码一样放置图像

You can dislay image like this code

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

          });

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

If your data is base64 display like this

 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

这篇关于以角度查看Blob响应为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！