title: Display Image from Gallery
body: <p>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</p>
  
  <pre><code>file:///Users/ray/Library/Developer/CoreSimulator/Devices/C8202B3B-300B-4819-8CD3-4C4AA690CE7C/ data/Applications/D82BF64E-6DD1-4645-B637-BCF65001FD29/tmp/cdv_photo_003.jpg
  </code></pre>
  
  <p>but when I try to select a photo from a gallery it shows a broken image thumbnail, and it turns a file path like.</p>
  
  <pre><code>content://com.android.providers.media.documents/document/image%3A21
  </code></pre>
  
  <p><strong>Ionic CLI Version:</strong> PRO 4.2.1</p>
  
  <p><strong>Cordova Verion:</strong> 8.0.0</p>
  
  <p><strong>NPM Version:</strong> 6.4.1</p>
  
  <p><strong>Node.js version:</strong> 8.11.3</p>
  
  <p><strong>Platform:</strong> Android</p>
  
  <p>I've also tried searching for a solution but it didn't work or I am still doing something wrong</p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/31965128/unable-to-load-image-when-selected-from-the-gallery-on-android-in-phonegap">Unable to load image when selected from the gallery on Android in phonegap</a></p></li>
  <li><p><a href="https://www.raymondcamden.com/2014/10/10/Cordova-the-Camera-plugin-AngularJS-and-Ninja-Cats" rel="nofollow noreferrer">https://www.raymondcamden.com/2014/10/10/Cordova-the-Camera-plugin-AngularJS-and-Ninja-Cats</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/50335223/ionic-cordova-how-to-display-an-image-in-img-tag-from-android-gallery-when-i-g">ionic cordova : how to display an image in img tag from android gallery when i get content:// url from filechooser plugin</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/20638932/unable-to-load-image-when-selected-from-the-gallery-on-android-4-4-kitkat-usin">Unable to load image when selected from the gallery on Android 4.4 (KitKat) using PhoneGap Camera Plugin</a></p></li>
  </ul>
  
  <p><em>Some of them suggests using this code</em></p>
  
  <pre><code>if (imageURI.substring(0,21)=="content://com.android") {
    photo_split=imageURI.split("%3A");
    imageURI="content://media/external/images/media/"+photo_split[1];
  }
  </code></pre>
  
  <p><em>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 <strong>Google Photos</strong> which returns 'content://com.google.android'</em></p>
  
  <p>_Some of them also suggests using <strong>DATA_URL</strong> on <strong>destination type</strong> but it is memory intensive and may cause the app to crash_</p>
  
  <p>Here is my code:</p>
  
  <p><strong>TS file</strong></p>
  
  <pre><code>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) =&gt; {
       let base64Image = 'data:image/jpeg;base64,' + imageData;
       this.imagePreview = imageData;
      }, (err) =&gt; {
        this.toastCtrl.presentToast(err);
      });
    }
  </code></pre>
  
  <p><strong>HTML File</strong></p>
  
  <pre><code>&lt;img src="{{imagePreview}}" /&gt;;
  </code></pre>
  
  <p>I hope someone could help me with this. Thank you in advance .</p>