Angular4显示来自服务器的图像

这是一个工作示例：

创建image.service.ts并输入以下代码：

getImage(imageUrl: string): Observable<File> {
        return this.http
            .get(imageUrl,{ responseType: ResponseContentType.Blob })
            .map((res: Response) => res.blob());
    }

现在你需要在image.component.ts中创建一些函数来获取图像并在html中显示它.

要从Blob创建图像,您需要使用JavaScript的FileReader.
这是创建新FileReader并侦听FileReader的load-Event的函数.结果,此函数返回base64编码的图像,您可以在img src-attribute中使用它：

imageToShow: any;

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

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

如果您有多个图像,则可以将imageToShow [] = []定义为数组.现在你可以简单地将reader.result推送到这个数组.例如：this.imageToShow.push(reader.result).在模板中,您可以使用* ngFor =“let image of imageToShow;”迭代并输出此数组.

现在,您应该使用创建的ImageService从api获取图像.您应该订阅数据并将此数据提供给createImageFromBlob-function.这是一个示例函数：

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

现在,您可以在HTML模板中使用imageToShow变量,如下所示：

<img [src]="imageToShow"
     alt="Place image title"
     *ngIf="!isImageLoading; else noImageFound">
<ng-template #noImageFound>
     <img src="fallbackImage.png" alt="Fallbackimage">
</ng-template>

我希望这个描述清楚明白,你可以在你的项目中使用它.