Getting Image from API in Angular 4 5

Question

I have new to develop Angular 4  I have facing issue while getting response from API about display image In API an image file has input-stream file I don t know how to retrieve it and display it properly   Can you anyone resolve it   I tried this    Image Component ts    this http get  http   localhost 8080 xxx download file 596fba76ed18aa54e4f80769             subscribe  response    gt    var blob   new Blob  response text      type   image png                console log blob              console log window btoa blob toString                        Result of this    W29iamVjdCBCbG9iXQ     but it was not correct format   and tried this also   this http get  http   localhost 8080 xxx download file 596fba76ed18aa54e4f80769   map Image  gt Image text       subscribe data   gt        console log  data toString               Result like this              ExifII   7                                                        DuckyK  fhttp   ns adobe com xap 1 0  lt  xpacket begin    id  W5M0MpCehiHzreSzNTczkc9d   gt   lt x xmpmeta xmlns x  adobe ns meta   x xmptk  Adobe XMP Core 5 3-c011 66 145661  2012 02 06-14 56 27          gt   lt rdf RDF xmlns rdf  http   www w3 org 1999 02 22-rdf-syntax-ns   gt   lt 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   gt   lt xmpMM DerivedFrom stRef instanceID  xmp iid 7092a9cd-b3fd-bb49-b53c-9b6e1aa1ac93  stRef documentID  adobe docid photoshop 40615934-3680-11e7-911d-f07c687d49b8   gt   lt dc rights gt   lt rdf Alt gt   lt rdf li xml lang  x-default  gt                                                        lt  rdf li gt   lt  rdf Alt gt   lt  dc rights gt   lt dc creator gt   lt rdf Seq  gt   lt  dc creator gt   lt  rdf Description gt   lt  rdf RDF gt   lt  x xmpmeta gt   lt  xpacket end  r   gt    Photoshop 3 08BIMJZ Gt6                                                      8BIM   lt       z     Adobed         but I used to encode using window btoa it should be error like not latin range

User · Answer

angular 5      getImage id  string   Observable lt Blob gt        return this httpClient get  http   myip image   id   responseType   blob

User · Answer

You should set responseType  ResponseContentType Blob in your GET-Request settings  because so you can get your image as blob and convert it later da base64-encoded source  You code above is not good  If you would like to do this correctly  then create separate service to get images from API  Beacuse it ism t good to call HTTP-Request in components   Here is an working example   Create image service ts and put following code   Angular 4   getImage imageUrl  string   Observable lt File gt        return this http          get imageUrl    responseType  ResponseContentType Blob             map  res  Response    gt  res blob         Angular 5    getImage imageUrl  string   Observable lt Blob gt      return this httpClient get imageUrl    responseType   blob          Important  Since Angular 5  you should use the new HttpClient    The new HttpClient returns JSON by default  If you need other response type  so you can specify that by setting responseType   blob   Read more about that here   Now you need to create some function in your image component ts to get image and show it in html   For creating an image from Blob you need to use JavaScript s FileReader  Here is function which creates new FileReader and listen to FileReader s load-Event  As result this function returns base64-encoded image  which you can use in img src-attribute   imageToShow  any   createImageFromBlob image  Blob       let reader   new FileReader       reader addEventListener  load        gt          this imageToShow   reader result        false       if  image          reader readAsDataURL image            Now you should use your created ImageService to get image from api  You should to subscribe to data and give this data to createImageFromBlob-function  Here is an example function   getImageFromService           this isImageLoading   true        this imageService getImage yourImageUrl  subscribe data   gt            this createImageFromBlob data           this isImageLoading   false           error   gt            this isImageLoading   false          console log error                 Now you can use your imageToShow-variable in HTML template like this    lt img  src   imageToShow       alt  Place image title        ngIf   isImageLoading  else noImageFound  gt   lt ng-template  noImageFound gt        lt img src  fallbackImage png  alt  Fallbackimage  gt   lt  ng-template gt    I hope this description is clear to understand and you can use it in your project   See the working example for Angular 5  here

User · Answer

There is no need to use angular http  you can get with js native functions    x000D   x000D     you will ned this function to fetch the image blob  x000D  async function getImage url  fileName    x000D          on the first then you will return blob from response x000D      return await fetch url  then r   gt  r blob    x000D       then  blob    gt       on the second  you just create a file from that blob  getting the type and name that intend to inform x000D            x000D          return new File  blob   fileName        blob type split      1     x000D          x000D    x000D   x000D     example url x000D  var url    https   img freepik com vetores-gratis icone-realista-quebrado-vidro-fosco 1284-12125 jpg   x000D   x000D     calling the function x000D  getImage url   your-name-image   then function file    x000D   x000D         with file reader you will transform the file in a data url file  x000D      var reader   new FileReader    x000D      reader readAsDataURL file   x000D      reader onloadend        gt    x000D       x000D         just putting the data url to img element x000D          document querySelector   image   src   reader result   x000D        x000D     x000D   lt img src    id  image   gt  x000D   x000D   x000D

[angular] Getting Image from API in Angular 4/5+?

Examples related to angular

Examples related to typescript

Examples related to angular2-services