Ionic 3 - ios - displaying selected image on screen

Question

I set up the camera plugin to select an image from the photo library and upload it to the server with the following code:

getImage() {
  //By default the camera retrieves the image as a JPEG file.
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    targetWidth:1080,
    targetHeight:1080,
    correctOrientation: true,
    mediaType: this.camera.MediaType.PICTURE,
    encodingType: this.camera.EncodingType.JPEG

  }

  this.camera.getPicture(options).then((fileUri) => {

    if (this.platform.is('ios')) {
        return this.crop.crop(fileUri, {quality: 100});
      } else if (this.platform.is('android')) {
        // Modify fileUri format, may not always be necessary
        fileUri = 'file://' + fileUri;

        /* Using cordova-plugin-crop starts here */
        return this.crop.crop(fileUri, { quality: 100 });
      }
  }, (err) => {
    console.log(err);

  }).then((path) => {
    // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
    console.log('Cropped Image Path!: ' + path);
    this.imagePath = path;
    return path;
  });
}

I then display my image preview on the screen like so:

<img [src]="imagePath"  />

The selecting image, cropping and uploading work perfectly fine on both iOS and Android. However, on iOS the displaying of the image does not work. (Nothing shows up)

My console log shows the following:

2017-12-07 15:06:52.559614-0500 fd-app[2537:1186586] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles 2017-12-07 15:06:52.560425-0500 fd-app[2537:1186586] [MC] Reading from public effective user settings. 2017-12-07 15:06:55.754175-0500 fd-app[2537:1186662] [discovery] errors encountered while discovering extensions: Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled} 2017-12-07 15:07:04.589982-0500 fd-app[2537:1186586] Cropped Image Path!: file:///var/mobile/Containers/Data/Application/8B2CD0E8-F6AC-4530-BF02-D2F7A188EAC2/tmp/cdv_photo_004.jpg

I tried adding Photo Library Usage property to the Info.plist file but that didn't help. Any suggestions what to try next?

UPDATE: Not sure if this has anything to do with it but I am using Xcode 9.2 beta because my iPhone is on 11.2

Also, everything I'm googling is pointing to the fact that this is a permissions problem, however, after selecting the image, the image appears in the cropper... this makes me suspect something odd is going on here? How can the cropper show the image but not the HTML page?

Answer 1

If you are using WKWebview which is the default webview in IOS 11 as per the official blog post, you need to rewrite the file:// url before using in your HTML.

If you’re working with local files (text files, images, videos), you’ll need to make sure that the path of file does not have file:// in front of it.

import { normalizeURL } from 'ionic-angular';

And in your function,

 this.imagePath = normalizeURL(path);
    return path;

Further check troubleshooting section which says the same.

Answer 2

You can also try to use 'DomSanitizer' (For some reason, the image is locked):

ts

import { DomSanitizer } from '@angular/platform-browser';

constructor(
   public _DomSanitizer: DomSanitizer,
   private cameraCtrl: Camera,
   ...
}


this.cameraCtrl.getPicture(this.options).then((imageData) => {
   this.photoSrc  = 'data:image/jpg;base64,' + imageData;
   this.cameraPhoto = this._DomSanitizer.bypassSecurityTrustUrl(this.photoSrc)
...})

html

<img[src]="cameraPhoto">