Camera Image not displaying in iOS

Ionic Framework ionic-v3
1

Hi, I’ve been using the camera and the Image picker plugin and displaying the images in FILE_URI format for a couple of months now, but since our last update (31 July) the images don’t display on iOS. I tried everything I could think of like display in Base64, using the Dom sanitizer, using ion-img instead of img…

Does anyone have a solution for this problem ?

Here is a snippet of my code:

 <ion-slides #imgSlider class="imgSlider" slidesPerView="auto">
     <ion-slide *ngFor="let image of images, let i = index">
         <div class="cameraImg" [style.height.px]="cameraImageHeight">
              <img class="spotImg" [src]="image.url" />
          </div>
     </ion-slide>
 </ion-slides>

 this.camera.getPicture({
        destinationType: this.camera.DestinationType.FILE_URI,
        correctOrientation: true,
        encodingType: this.camera.EncodingType.JPEG,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true
    }).then((imageData: any) => {
      console.log(imageData);
        var d = new Date();
        var n = d.getTime();
        this.images.push({
          id: n,
          url: imageData,
          newImage: true,
          thumbnail: (this.images.length == 0)? true : false 
        });
    }, (err) => {
        console.log(err);
    });
2

Just noticed this as well, did you resolve it? I just started looking around, taken video still displays.
update_1: works through Ionic View app, but not when testing via ionic cordova run ios

cli packages: 

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 1.3.7
    Cordova Platforms  : android 6.1.2 ios 4.3.1 windows 4.4.3
    Ionic Framework    : ionic-angular 3.3.0

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : 1.9.1 
    ios-sim    : 5.1.0 
    npm        : 3.10.10
3

Yes I solved the problem, removing the wkwebview plugin solved the issue !

3 Likes
4

Dang. Needed that for a sticky header list, but now that you mention it this did happen around the same time I installed. Ok, thanks for the update.

5

Thank you! That solved the issue for me after a couple of hours of hair pulling :smile:

For those who have to work with wkwebview, a workaround is available at https://ionicframework.com/docs/wkwebview/

6

Had the same issue and thanks to tchinou1 I was able to solve it but in my case I did the following:

ionic cordova plugin remove cordova-plugin-ionic-webview
ionic cordova platform ios remove
ionic cordova platform ios add
1 Like
7

Try to use this plugin and respective method in order to normalize FILE_URI:

8

thank you! solve my problem