web-dev-qa-db-fra.com

Obtenir une image de l'API dans Angular 4/5 +?

J'ai un nouveau à développer Angular 4. Je suis confronté à un problème tout en obtenant une réponse de l'API à propos de l'affichage de l'image. correctement.

Pouvez-vous résoudre ce problème?

J'ai essayé ceci:

  • 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()));           
});

Résultat de ceci => W29iamVjdCBCbG9iXQ==, mais le format n'est pas correct

et essayé ceci aussi:

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

Résultat comme ceci =>

 ����\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����

mais j'avais l'habitude de coder en utilisant window.btoa ça devrait être une erreur comme pas une plage latine

angulartypescriptangular2-services
39
Karthic G

Vous devez définir responseType: ResponseContentType.Blob dans vos paramètres GET-Request, car vous pourrez ainsi obtenir votre image sous forme de blob et la convertir ultérieurement en source codée en base64. Votre code ci-dessus n'est pas bon. Si vous souhaitez le faire correctement, créez un service distinct pour obtenir des images à partir de l'API. Ce n'est pas bien d'appeler HTTP-Request dans les composants.

Voici un exemple de travail:

Créez image.service.ts et mettez le code suivant:

angulaire 4: 

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

angulaire 5 +: 

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

Important: Puisque Angular 5+, vous devez utiliser le nouveau HttpClient.

Le nouveau HttpClient renvoie JSON par défaut. Si vous avez besoin d'un autre type de réponse, vous pouvez donc le spécifier en définissant responseType: 'blob'. En savoir plus à ce sujet ici .

Maintenant, vous devez créer une fonction dans votre image.component.ts pour obtenir une image et l'afficher au format HTML.

Pour créer une image à partir de Blob, vous devez utiliser la fonction FileReader de JavaScript. Voici une fonction qui crée un nouveau FileReader et écoute l'événement de chargement de FileReader. En conséquence, cette fonction renvoie une image codée en base64, que vous pouvez utiliser dans img src-attribut:

imageToShow: any;

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

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

Maintenant, vous devriez utiliser votre ImageService créée pour obtenir une image de api. Vous devez vous abonner aux données et leur donner ces fonctions createImageFromBlob-. Voici un exemple de fonction:

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

Maintenant, vous pouvez utiliser votre variable imageToShow- dans un modèle HTML comme ceci:

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

J'espère que cette description est claire à comprendre et que vous pourrez l'utiliser dans votre projet.

Voir l'exemple de travail pour Angular 5+ ici .

118
Gregor Doroschenko

5 angulaire:

 getImage(id: string): Observable<Blob> {
    return this.httpClient.get('http://myip/image/'+id, {responseType: "blob"});
}
9
user5134904