change - ng-href angularjs

¿Obtener imagen de API en Angular 4/5+?

Question

Tengo nuevo para desarrollar Angular 4. Tengo problemas al obtener la respuesta de la API sobre la visualización de la imagen. En la API, un archivo de imagen tiene un archivo de flujo de entrada, no sé cómo recuperarlo y mostrarlo correctamente.

¿Alguien puede resolverlo?

Intenté esto:

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

Resultado de esto => W29iamVjdCBCbG9iXQ== , pero no era el formato correcto

y probé esto también:

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

Resultado como este =>

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

pero solía codificar usando window.btoa debería ser un error como el rango no latino

Answer 1

Debería establecer responseType: ResponseContentType.Blob en su configuración de solicitud GET, porque así puede obtener su imagen como blob y convertirla más tarde en una fuente codificada en base64. El código anterior no es bueno. Si desea hacer esto correctamente, cree un servicio separado para obtener imágenes de la API. Porque no es bueno llamar a HTTP-Request en componentes.

Aquí hay un ejemplo de trabajo:

Cree image.service.ts y ponga el siguiente código:

Angular 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'' });
}

Importante: desde Angular 5+ deberías usar el nuevo HttpClient .

El nuevo HttpClient devuelve JSON de forma predeterminada. Si necesita otro tipo de respuesta, puede especificarlo estableciendo responseType: ''blob'' . Lea más sobre eso here .

Ahora necesita crear alguna función en su image.component.ts para obtener la imagen y mostrarla en html.

Para crear una imagen de Blob, debe usar FileReader de JavaScript. Aquí hay una función que crea un nuevo FileReader y escucha el evento de carga de FileReader. Como resultado, esta función devuelve una imagen codificada en base64, que puede usar en 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);
   }
}

Ahora debe usar su ImageService creado para obtener imágenes de la API. Debería suscribirse a los datos y proporcionar estos datos para createImageFromBlob ImageFromBlob. Aquí hay una función de ejemplo:

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

Ahora puede usar su imageToShow -variable en una plantilla HTML como esta:

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

Espero que esta descripción sea clara de entender y pueda usarla en su proyecto.

Vea el ejemplo de trabajo para Angular 5+ here .

Answer 2

angular 5:

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