typescript-从Angular 4/5 +中的API获取图像?

我是开发Angular 4的新手。在从API获得有关显示图像的响应时遇到了问题。在API中,图像文件具有输入流文件,我不知道如何检索和正确显示它。

有人可以解决吗?

我尝试了这个:

  • Image.Component.ts:

    this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769')
             .subscribe((response) => { var blob = new Blob([response.text()], {type: "image/png"});
               console.log(blob);
               console.log(window.btoa(blob.toString()));           
    });
    

结果=> W29iamVjdCBCbG9iXQ==,但是格式不正确

并尝试了这个:

this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769').map(Image=>Image.text())
  .subscribe(data => {
    console.log((data.toString()));   
});

结果像这样=>

 ����\ExifII*��7                                                      ��DuckyK��fhttp://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmpMM:OriginalDocumentID="xmp.did:0280117407206811A2188F30B3BD015B" xmpMM:DocumentID="xmp.did:E2C71E85399511E7A5719C5BBD3DDB73" xmpMM:InstanceID="xmp.iid:E2C71E84399511E7A5719C5BBD3DDB73" xmp:CreatorTool="Adobe Photoshop CC 2014 (Windows)"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:7092a9cd-b3fd-bb49-b53c-9b6e1aa1ac93" stRef:documentID="adobe:docid:photoshop:40615934-3680-11e7-911d-f07c687d49b8"/> <dc:rights> <rdf:Alt> <rdf:li xml:lang="x-default">                                                      </rdf:li> </rdf:Alt> </dc:rights> <dc:creator> <rdf:Seq/> </dc:creator> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>���Photoshop 3.08BIMJZ%Gt6                                                      8BIM%�<".}��νz��܌��Adobed����  

但是我曾经使用window.btoa进行编码,这应该是错误的,例如不是拉丁范围

Karthic G asked 2020-08-07T03:23:40Z
2个解决方案
121 votes

您应该在GET-Request设置中设置imageToShow,因为这样您就可以将图像获取为Blob,并在以后将其转换为base64编码的源。 您上面的代码不好。 如果您想正确执行此操作,请创建单独的服务以从API获取图像。 因为在组件中调用HTTP请求不是很好。

这是一个工作示例:

创建imageToShow并输入以下代码:

角度4:

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

Angular 5+:

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

重要提示:由于Angular 5+,您应该使用新的imageToShow

新的imageToShow默认情况下返回JSON。 如果您需要其他响应类型,则可以通过设置createImageFromBlob进行指定。在此处了解更多信息。

现在,您需要在imageToShow中创建一些函数,以获取图像并将其显示为html。

要从Blob创建图像,您需要使用JavaScript的imageToShow。这是创建新的createImageFromBlob并侦听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从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>

我希望此描述易于理解,并且可以在项目中使用。

请在此处查看Angular 5+的工作示例。

Gregor Doroschenko answered 2020-08-07T03:24:39Z
11 votes

角度5:

 getImage(id: string): Observable<Blob> {
    return this.httpClient.get('http://myip/image/'+id, {responseType: "blob"});
}
answered 2020-08-07T03:24:59Z
translate from https://stackoverflow.com:/questions/45530752/getting-image-from-api-in-angular-4-5