Base64 image are not showing

Ionic Framework ionic-v3
21

ok so are you sending it to a server and then calling it…

22

yaaa there is my server side json response Screenshot_9

23

Ok, when your string is valid you can try to change

this

<img src="{{item.image1}}">

to

 <img [src]="item.image1">
24

I’m try this but nothing happen

25

Strange. I use this in my project to show a base64 image strng and it works fine. Last try is to change

item.image1

to

item?.imag1

or use the async pipe. Perhaps the angular change detector do not detect that the image string has chagned.

26

here is my code

 this.http.get(this.baseurl+this.user_id)
      .subscribe((res:Response)=>{
      let dataTemp = res.json(); //dataTemp is the json object you showed me
      this.mydata = dataTemp.GetAds; //contains a [] object with all yours user
     console.log(this.mydata[0].image1);   
    })

.html

<ion-card  *ngFor="let item of mydata">
  <ion-card-header>
    {{item.cat_name}}
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-start color="iconColor"></ion-icon>
      Expected Price:{{item.price}}
    </button>

     <ion-card-content>
   {{item.post_desc}}
  </ion-card-content>
  </ion-list>
  <<img src="{{item.image1}}" alt="">
   <button ion-button full (click)="getdetails($event , item)">Get seller details</button>
</ion-card>

here is my json response
Screenshot_9

27

I’m having the same issue. In my case I get an actual jpeg image from my rest api, I convert it to a base64 string and it does not show either…
Also when I put the base64 string (result from image convert) in a json reader, it gives a broken image.
Anybody maybe got a better idea to display the image I get from my rest api ?

28

can you share your code here.?

29

[NOT A SOLUTION]
Just sharing my code here, having the same problem after I convert my jpeg from response (rest api) to a base64 string using a blob.

This is the service provider I convert my image.

imageConvert(path) {
    // Check if browser, mobilebrowser or mobile app 
    let platforms = this.platform.platforms();
    this.platformList = platforms.join(', ');
    if (this.platform.is('core') || this.platform.is('mobileweb')) {
      this.imagePath = path.substring('https://api.example.be'.length);
    } else {
      this.imagePath = path;
    }


    return new Promise((resolve, reject) => {
    // Http GET request with token bearer (JWT)
      this.authHttp.get(this.imagePath)
      .toPromise()
      .then(res => {
        // Response is an .jpeg image
            var blob = new Blob([res['_body']], {type: 'image/jpeg'});

        var reader = new FileReader();
        reader.readAsDataURL(blob);

        reader.onloadend = () => {
          // This returns a base64 string
          const sanitizedContent = this.sanitizer.bypassSecurityTrustUrl(reader.result);
          resolve(sanitizedContent);
        }

      });
    });

  }

It works with a bearer token (JWT), I do a get request to get an array with url links for the images on the api. So I make a get request to get those images (I use the url to make the call) and in postman I actually get that image as a response.

I call this function in the controller of the html page like this:

export class ActivationDetailMediaPage {

    activation;
  photos = [];
  id;

  constructor(public navCtrl: NavController, public navParams: NavParams, public imageService: ImageServiceProvider, public activationService: ActivationServiceProvider) {
  // Data from activation overview page
    this.activation = navParams.get('activation');
    this.id = this.activation.id;

    // Fetching all image url's to api
    this.activationService.getMedia(this.id).subscribe( photos => {
      // Loop through all photos
      for (let path of photos) {
        // Convert the image for on the .html page
        this.imageService.imageConvert(path.url).then( photo => {
          this.photos.push(photo);
        });
      }

    });
  }

}

And finally I try to call the src in an image tag on my html like this:

<img *ngFor="let photo of photos" [src]="photo">
30

You can try this type of syntax:

<img [src]=“item.image1”>

31

Still not working.

Does anybody has an idea?
I think there is something wrong when receiving my response from the api and then converting it to a base64 string.

Really need help, I’ve tried everything!

32

Maybe…
The JSON data is sanitized.

Do your index.html be written like this.

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

If like this code is written then, please comment out.
and confirm image’s display.

33

Hi, I am experiencing exactly the same problem
…at least did you managed to overcome it? If yes could you share the solution?

Thanks,
Luigi

34

I wasted a HUGE amount of time but at leat I got it

…I do not know where exactly the bug is but if you store your image on the server (trough rest) and then you retrieve it all the “+” in your base64 encoded image are replaced by a blank character …so if you have just to put them back:

this.risA[i].foto = this.risA[i].foto.replace(new RegExp(’ ', ‘g’), ‘+’);

This worked for me

1 Like
35

Thank you so much !!!

36

happy to have been useful :slight_smile:

1 Like