javascript - 将 blob 响应视为 Angular 图像

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;
      });

我使用相同的方法为 ng2-pdfviewer 设置了 url，它工作正常。

Answer 1

你可以像这样显示图片

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