CODEWITHSUNDEEP
ionic-frameworkionic4
HavenNo7
HavenNo7

Reputation: 107

Ionic doesnt display image loaded from backend

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

I tested the string on other sites, and I get a message saying the conversion was wrong.

I dont know how to fix this. Please help.

EDIT

I Also tried converting the img like this:

    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'), '+');

Also tried:

  var imageData = btoa(r.data);

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


  console.log(this.logo)

enter image description here

Upvotes: 4

Views: 619

Answers (2)

Sayed Mohd Ali
Sayed Mohd Ali

Reputation: 2254

this.unit.img(this.unitInfo.logo).then( (r) => {
      var imageData = btoa(r.data);
      this.logo = "data:image/png;base64,"+imageData
 this.logo =  this.logo.replace(new RegExp(’ ', ‘g’), ‘+’);

it all the “+” in your base64 encoded image are replaced by a blank character …so if you have just to put them back... There is a bug...

this fixed the bug for me hope it will work for you too...

since you are getting error while displaying the image you can use DomSanitizer... in also in your ts file add

ts

    import { DomSanitizer } from "@angular/platform-browser";
     constructor(
    private DomSanitizer: DomSanitizer
  ) {}

html

<img
        [src]="DomSanitizer.bypassSecurityTrustUrl(base64Image)"
        *ngIf="base64Image"
        alt="Ionic File"
        width="300"
      />

Upvotes: 2

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38922

There is URL.createObjectURL that can be used to create a URL representing the Observable of Blob returned in make_get_image.

In your code, you have accessed data in the blob but this has undefined value as the return value of make_get_image is an observable of Blob.

You should subscribe to / resolve blob from the Observable and create a URL to it. For example,

this.unit.img(this.unitInfo.logo).then((b: Blob) => {
  this.logo = URL.createObjectURL(b);
});

Note that you may or may not need to set the width and height properties of <ion-image> or in style properties of CSS class selector applied in the tag.

Upvotes: 1

Related Questions