Question

我想使用blob显示照片列表，但未显示任何图像。我在stackblitz中创建并提供了指向示例的链接。我错过了什么可以用来解决此问题？

我正在使用以下代码下载图片：

getImage(imageUrl: string): Observable<Blob> {
  return this.http.get(imageUrl, { responseType: 'blob' });
}

并使用服务检索图像：


CreateImageBlob(imageUrl: string): void {
   this.productService.getImage(imageUrl).subscribe(
     (val)=>{
       this.getImageFromService(val)
     },
     response => {
      console.log("POST in error", response);
    },
    () => {
      console.log("POST observable is now completed.");
    });
}

使用它来创建一个新文件：

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

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

最后显示图像的模板如下所示：

Answer 1

我建议您做很多事情，以帮助您解决问题。您正在做的是调用一个可观察的对象，订阅结果，并将订阅应用于绑定src。从根本上讲，这是行不通的，并且您至少需要删除subscribe，使用map管道运算符，并根据当前代码使用async管道。

您应该阅读如何使用Angular的async管道，这将使您可以执行以下操作：<img [src]="src$ | async">并使其正确绑定响应-@see {{3} }
您应该阅读Observables，特别是BehaviorSubject-@请参阅AsyncPipe
绑定时应阅读DomSanitizer-@see Understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject
最后，我将给一个孤立的组件渲染图像的工作

DomSanitizer是一个简单的示例）：

使用Blob使用Angular显示图像列表

1 个答案: