Ionic images from ImagePicker not showing

Ionic Native
1

Here is my configuration:

Ionic:

   ionic (Ionic CLI)  : 4.1.2
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : not available

home.html


<ion-content padding>
  <button ion-button (click)="takePhoto()">Camera</button>
  <button ion-button (click)="getPhoto()">Gallery</button>
  <p *ngIf="imagePath">Source: {{imagePath}} </p>
  <p align="center"><img *ngIf="imagePath" [src]="imagePath"/></p>
</ion-content>

home.ts

getPhoto(){ 
    
    this.imagePicker.getPictures({
      quality: 90,
      maximumImagesCount: 1,
      outputType: 0
    }).then((results) => {
      for (var i = 0; i < results.length; i++) {
          //this.imagePath = this.DomSanitizer.bypassSecurityTrustUrl(results[i]);
          //this.imagePath = normalizeURL(results[i]);
          //this.imagePath = (results[i]).substring(8);
          this.imagePath = results[i];
      }
    }, (err) => { 
      console.log(err);
    });

  }

And the output is :frowning: :

ionicerror
ionicerror.png1080×642 42.5 KB

I really dont know what is wrong :frowning: , I would appreciate any help

1 Like
2

you need resolveLocalFilesystemUrl from the FileManager Plugin

3

doesn’t help, I still get the same path and broken image

4
  1. do: outputType to:
outputType:1

When it does 1, it outputs base64

  this.imagePath = 'data:image/jpeg;base64,' + result[i]