Ionic 4 = Backend binary image

Ionic Framework
1

I have to request a binary image from a server, but I need extra headers and authorization. Thus I can only do this on the backend. After I receive the image using ionic native HTTP, I’ve tried to display the image several times, but none worked.

1) I tried setting the binary data to a field like this:

    this.unit.img(this.unitInfo.logo).then( (r) => {
      this.logo = r.data;
    }

And on html:

  <ion-img [src]="logo"></ion-img>

2) I also tried converting the img to a base64 img, like this:

 this.unit.img(this.unitInfo.logo).then( (r) => {
      var imageData = btoa(r.data);
      this.logo = "data:image/png;base64,"+imageData

And also:

  <ion-img [src]="logo"></ion-img>

To display the image, but none of these works :frowning:

Dont know if this is useful, but this is the code used to fetch the image:

    make_get_img(path, options){
        let headers = Object.assign({
            'Accept': '*/*',
            'Content-Type': '*/*'
            }, options.headers || {})

        if(this.token){
            headers = Object.assign(headers, {
                'token': this.token
            })
        }
        
        let url = this.getUrlWithParams(path, options.urlParams)


        return this.http.get(url, { responseType: 'blob' }, headers);
    }

This is the console.log of the binary:

image
image.png627×681 46.8 KB

And the console.log of the base64 string:

image

I tested the string on other sites, and I get a message saying tthe conversion was wrong.
I dont know how to fix this.
Please help.

2

I also tried:


console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
      var imageData = btoa(r.data);

      console.log(imageData)

      this.logo = "data:image/png;base64,"+imageData
      this.logo =  this.logo.replace(new RegExp(' ', 'g'), '+');

      console.log("-------------------")

      console.log(this.logo)

and this also:


var u8 = new Uint8Array(r.data);
      console.log(u8)
      
      var b64encoded = btoa(String.fromCharCode.apply(null, u8));
      var mimetype="image/png"; // or whatever your image mime type is
      
      this.logo = "data:"+mimetype+";base64,"+b64encoded;
        this.logo =  this.logo.replace(new RegExp(' ', 'g'), '+');
        
        console.log(this.logo)

Andddd, tried this method to fetch from the Api:

return this.http.downloadFile(url, {}, headers, 'file:///logo.png');

but I get an:

error: "There was an error with the request: /logo.png (Read-only file system)"}error: "There was an error with the request: /logo.png (Read-only file system)"

3

image
image1615×882 196 KB

Also tried:

     var imageData = btoa(r.data);

      let objectURL = 'data:image/png;base64,' + imageData;
      this.logo = this.sanitizer.bypassSecurityTrustUrl(objectURL);
      

      console.log(this.logo)
4

Hi,

I am also facing this issue. Can someone help in this what should be done?

Thanks