Question

尊敬的Stackoverflow用户，

最近，我需要将后端的图像动态加载到应用程序中。直到最近-由于从未在文档中以其他任何方式指定它-我以为我们一直是SVG图像。这花了很多功夫，因为我粗略地知道应该做什么。

getGmaLogo(gmaId) {

this.httpClient.get(ApiUrls.QA_GMA_LOGO + "/" + gmaId, { headers: this.authHeader, responseType: "text" })
  .pipe(catchError(error => {
  // Those are merely my own error messages 
    this.errorService.showError(error);
    return this.errorService.handleError(error);
  }))
  .subscribe(image => {         

    let base64EncodedString = window.btoa(image)

    this.gmaLogo = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/svg+xml;base64,' + s);
  })

}

然后将其添加到我的页面中，如下所示。

<img [src]="gmaService.gmaLogo || ''" alt="Company Name"/>

但是可惜，事情从来没有变得容易，对吗？

实际上，我可能会收到jpeg，png等。显然，如果人们不得不选择仅使用SVG的图标，将会给人们带来不便。这导致了我的问题...我可以根据响应动态推断出我收到的可用数据类型，而无需在标题中设置特定的响应类型？将其保留为空白不起作用，因为众所周知，默认响应类型为JSON。

Answer 1

在我的项目中，我在客户端使用Blob响应类型，而不关心文件的类型。它的工作原理与预期的一样：https://stackblitz.com/edit/angular-yuy5km

服务

getGmaLogo(imageUrl: string): Observable<Blob> {
  return this.httpClient.get(imageUrl, {headers: this.authHeader, responseType: 'blob' });
}

组件

要从Blob创建图像，我使用FileReader来读取Blob的内容

imageToShow: any;

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

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

接下来，您将从服务中获取图像

getImageFromService() {
      this.imageService.getImage(yourImageUrl).subscribe(data => {
        this.createImageFromBlob(data);
      }, error => {
        console.log(error);
      });
}

HTML

<img [src]="imageToShow" />

从未知文件类型的后端动态接收图像

1 个答案: