Question

我正在尝试显示已从服务器端发送的图像，服务器发送图像然后将其转换为blob但我无法将其转换为图像以在DOM中显示

这是component.ts

中的代码

getImageFromService() {
      this.authService.getProfileImage().subscribe(data => {
        this.createImageFromBlob(data);
        console.log(data);
      }, error => {
        console.log(error);
      });
}

此代码以服务器的形式从服务器获取图像

这是我编写的将blob转换为图像的代码

createImageFromBlob(image: Blob) {
     let reader = new FileReader();
     reader.addEventListener("load", () => {
        this.imageToShow = reader.result;
     }, false);

     if (image) {
        reader.readAsDataURL(image);
     }
  }

这是HTML中的代码

<img [src]="imageToShow " alt="" class="img">

这是chrome devtool中的响应

Blob(763750) {size: 763750, type: "text/xml"}

Answer 1

我认为你只需要这样做就可以从Blob转换为文件：

const file = new File([blob], fileName);

Answer 2

回答得有点晚，但这是一个解决方案：

TS ：

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

...

img;

constructor(private storageService: StorageService, private sanitizer: DomSanitizer) { }

this.storageService.downloadBlob("myImage").subscribe(blob => {
     const objectURL = URL.createObjectURL(blob);
     const img = this.sanitizer.bypassSecurityTrustUrl(objectURL);
     this.img = img;
});

HTML ：

<img [src]="img"/>

进一步了解createObjectURL：https://developer.mozilla.org/docs/Web/API/URL/createObjectURL

和bypassSecurityTrustUrl：https://angular.io/api/platform-browser/DomSanitizer

Answer 3

我尝试了这个，并且适用于我的：

在component.ts

imageToShow : any;
getImageFromService() {
      this.authService.getProfileImage().subscribe(data => {
        this.imageToShow = data;
        console.log(data);
      }, error => {
        console.log(error);
      });
}

在 HTML 中

<img [src]="'data:image/jpeg;base64,' + imageToShow" alt="" class="img">

这么晚了，希望能帮到你

如何将Blob转换为图像并将其显示为Angular 5

3 个答案: