Ionic Photo Viewer doesn't work on ios

Question

I'm using Ionic Photo Viewer to show images in full screen. My HTML is:-

<ion-slides>
  <ion-slide col-12 *ngFor="let image of businessImages | async">
     <div class="main-slider-image" [defaultImage]="'assets/imgs/default_image_slider.png'" [lazyLoad]="image.thumb400Url" [offset]="100" (click)="openImage(image.originalUrl)">
     </div>
  </ion-slide>
</ion-slides>

On TypeScript:-

openImage(url) {
    this.photoViewer.show(url, "", { share: false });
}

On Android is working like this:-

Click here to see Android version

On the other hand, on the iPhone is working like this:-

Click here to see iPhone version

On the iPhone, the photo viewer doesn't open the photo. I've tried:-

openImage(url) {
    this.photoViewer.show(url);
}

But this also didn't work. If you've any idea how to solve this issue please share. Thank you

Answer 1

For IOS, use FileOpen native library instead of PhotoViwer

Answer 2

This issue is really crazy and had to spend lots of time to figure out the solutions. The solutions is all the parameters in the 'options' variable are required.

Follow this:

const options = {
    share: true, // default is false
    closeButton: true, // default is true
    copyToReference: true, // default is false
    headers: "",  // If it is not provided, it will trigger an exception
    piccasoOptions: { } // If it is not provided, it will trigger an exception
};

this.photoViewer.show(url, "", options);

Answer 3

I have the same error, and im solve with this

ionic cordova plugin rm com-sarriaroman-photoviewer
ionic cordova plugin add [email protected]
npm install --save @ionic-native/photo-viewer

on your function, if device using ios, decodeURIComponent was the answer

  showImage(url,title) {
    var options = {
      share: true, // default is false
      closeButton: true, // iOS only: default is true
      copyToReference: true // iOS only: default is false
    };

    if (this.platform.is("ios")) {
      url = decodeURIComponent(url);
    }

    this.photoViewer.show(url, title, options);
  }

Answer 4

At least I had to revert to 1.1.11 (found from NPM) to show IOS properly. For Android, latest version seemed to work.

Share did not seem to work for IOS in 1.1.11. In Android latest photo-viewer plugin it seemed to work. So now I have:

  private viewPhoto(url: string): void {
    if (url && url != 'assets/images/profile.png') {
      this.photoViewer.show(url, '', { share: this.platform.is('android') });
    }
  }

And.. I think the correct place to discuss these is https://github.com/sarriaroman/photoviewer/issues.

And another thing, I'm considering to use another plugin, https://github.com/Riron/ionic-img-viewer. Some of the photoviewer issues had a link to this but haven't tried it yet.