Display Image from Gallery

Ionic Native
1

Hello :blush:

I have an app that allows a user to select a photo from the gallery or take a photo via camera. I am trying to display an image that was taken via camera and it works fine, it returns a file path like

file:///Users/ray/Library/Developer/CoreSimulator/Devices/C8202B3B-300B-4819-8CD3-4C4AA690CE7C/ data/Applications/D82BF64E-6DD1-4645-B637-BCF65001FD29/tmp/cdv_photo_003.jpg

but when I try to select a photo from a gallery it shows a broken image thumbnail, and it turns a file path like.

content://com.android.providers.media.documents/document/image%3A21

Here is my code:

TS file

selectImage(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      sourceType: sourceType
    }
    
    this.camera.getPicture(options).then((imageData) => {
     let base64Image = 'data:image/jpeg;base64,' + imageData;
     this.imagePreview = imageData;
    }, (err) => {
      this.toastCtrl.presentToast(err);
    });
  }

HTML File

<img src="{{imagePreview}}" />;

I’ve also tried searching for a solution but it didin’t work or I am still doing something wrong

Some of them suggests using this code

if (imageURI.substring(0,21)=="content://com.android") {
  photo_split=imageURI.split("%3A");
  imageURI="content://media/external/images/media/"+photo_split[1];
}

but this solution is not that robust cause not all of the image sources returns the same file path that contains ‘content://com.android’ like the photos that came from Google Photos which returns ‘content://com.google.android’

Some of them also suggests using DATA_URL on destination type but it is memory intensive and may cause the app to crash

Ionic CLI Version: PRO 4.2.1
Cordova Verion: 8.0.0
NPM Version: 6.4.1
Node.js version: 8.11.3
Platform: Android

I hope someone could help me with this. Thank you in advance :sparkling_heart:.

PLEASE HELP!!! PLEASE…

2

I have the same issue. Did you find a solution to display this content://com.android.providers.media.documents/document/image%3A21