Getting Image from API in Angular 4/5+?

getting image from api in angular 8
angular 5 display image from server
angular 6 display image from url
display image in angular 4
angular 7 display blob image
angular 7 display image from server
save image in local folder using angular 6
angular 2 display image from server

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) => { 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=>Image.text())
  .subscribe(data => {
    console.log((data.toString()));   
});

Result like this =>

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

but I used to encode using window.btoa it should be error like not latin range


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

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", () => {
      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 => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      }, error => {
        this.isImageLoading = false;
        console.log(error);
      });
}

Now you can use your imageToShow-variable in HTML template like this:

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

I hope this description is clear to understand and you can use it in your project.

See the working example for Angular 5+ here.

display-image-from-api, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Starter project for Angular apps that exports to the Angular CLI. 9.0k. 74. Files. src . 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.


angular 5 :

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

Fetch an image from Url In angular 4+ and store locally, Fetch an image from Url In angular 4+ and store locally As we get the image as a dataUrl, we now have the image as local. We can display� Since the browser just loads this image through a normal HTTP call, how is the server supposed to know if user A or user B is trying to consume an image? The server needs some kind of authorization to be passed to it. This article explains how to add security to images in Angular.


There is no need to use angular http, you can get with js native functions

// you will ned this function to fetch the image blob.
async function getImage(url, fileName) {
     // on the first then you will return blob from response
    return await fetch(url).then(r => r.blob())
    .then((blob) => { // on the second, you just create a file from that blob, getting the type and name that intend to inform
         
        return new File([blob], fileName+'.'+   blob.type.split('/')[1]) ;
    });
}

// example url
var url = 'https://img.freepik.com/vetores-gratis/icone-realista-quebrado-vidro-fosco_1284-12125.jpg';

// calling the function
getImage(url, 'your-name-image').then(function(file) {

    // with file reader you will transform the file in a data url file;
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
    
    // just putting the data url to img element
        document.querySelector('#image').src = reader.result ;
    }
})
<img src="" id="image"/>

Request Image Files with Angular 5 and an Bearer Access Token , In this case, any image requests to your server with an <img /> tag let token = { access_token: 'ABCDEF' }; // Get this from your auth service. The assets folder that the Angular CLI generated for us is the perfect place to use for storing images. Let's go grab the Angular logo from angular.io.


How to Preview Blobs With HTTP POST and Angular 5, With Angular, we can call a web service to get an image as a Blob, convert that to an image and display it on a web page. This may sound like a� I'm pretty new to Angular so I'm not sure the best practice to do this. I used angular-cli and ng new some-project to generate a new app. In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images. In app.component.html (which is the root of my application), I put


Safe image requests in angular, This article explains how to add security to images in Angular. httpClient // load the image as a blob .get(url, {responseType: 'blob'}) // create� In this tutorial, we will show you how to upload an image file in MEAN (MongoDB, Express.js, Angular 10, Node.js) stack app using Multer. We will use the previous tutorial on the REST API image upload with the latest version and dependencies for this tutorial.


How to make image upload easy with Angular, In this article, we will take a look at the Angular Part. You can see in the processFile that we are getting an image input we sent from the change event. image); return this.http.post('/api/v1/image-upload', formData); } }. Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Jobs Programming and related technical career opportunities