时间戳

首页 > 解决方案 > 将 blob 响应视为角度图像

javascript - 将 blob 响应视为角度图像

问题描述

我正在尝试从请求中获取 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并且效果很好。

标签： javascriptangular

解决方案

您可以像此代码一样显示图像

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

推荐阅读