CODEWITHSUNDEEP
ionic-frameworkionic-nativephotoviewer
Ankur
Ankur

Reputation: 181

Ionic Photo Viewer doesn't work on ios

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

Upvotes: 0

Views: 3954

Answers (4)

Tiwari
Tiwari

Reputation: 50

For IOS, use FileOpen native library instead of PhotoViwer

Upvotes: 0

Manoj Alwis
Manoj Alwis

Reputation: 1426

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);

Upvotes: 2

Alauddin Afif Cassandra
Alauddin Afif Cassandra

Reputation: 578

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);
  }

Upvotes: 0

Kari Salo
Kari Salo

Reputation: 1

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.

Upvotes: 0

Related Questions