PhotoViewer not working besides following examples and documentation. Image does not display

Question

After reading all the related post on Stack OverFlow and other sites, including Ionic documentation, I am not able to get this working. I have tried to replicate the same so currently I have:

In app.module.ts

import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';

and

@NgModule({
 declarations: [AppComponent],
 entryComponents: [],
 imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
 providers: [
     StatusBar,
     SplashScreen,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },    
     PhotoViewer

  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

in home.page.ts

import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';


export class HomePage {

  constructor(private photoViewer: PhotoViewer) { }

  openImage() {
    this.photoViewer.show(''../assets/baluarte.jpg');
  } 
}

and in home.page.ts

<ion-content padding>  
  <img src="../assets/baluarte.jpg" (click)="openImage()"/>
 <ion-button (click)="openImage()">View</ion-button>
</ion-content>

What I would like to achieve is to have the picture displayed and when I click as Ionic mentions your image in full screen with the ability to pan, zoom, and share the image. However, I'm trying at the same time to have a button with the same function just to be sure that the error is not in the image.

Also inside

this.photoViewer.show(''../assets/baluarte.jpg');

I am trying also with a URL since I'm not sure it could work with local file, but it is also not working

this.photoViewer.show('https://images.app.goo.gl/cW8jBeX33H9GKAon9.jpg')

My final goal is to use a local file.

Of course I installed

ionic cordova plugin add com-sarriaroman-photoviewer
npm install @ionic-native/photo-viewer

Answer 1

Although this is not a 100% guaranteed solution, I hope it will guide you in the right direction.

I had exactly the same issue and, for some reason, it has resolved on its own without actually doing any modifications to my code.

A bit of context:

I have a huge project that uses many native Cordova plugins and therefore whenever I want to add a new plugin, I always first test it in a blank project to avoid messing with the big one. So I created a new blank project and tested the Native PhotoViewer. It was working on the Android emulator as expected.

Then I moved to my default big project and followed the exact same steps, but nothing was happening. I was getting the exact same behavior as yours. I was executing ionic cordova run android -l -c and it was not working. So the only thing that I did was to ctrl + c (to cancel the process) and then executed ionic cordova run android -l -c and the issue magically vanished.

Steps that can resolve such issue:

Although I haven't managed to understand where is the issue, in such cases or similar issues, I would recommend the following steps to troubleshoot:

1. Stop the process and rerun it
2. Go to the Android Device or Android Emulator (where you are testing your app), manually uninstall the app, and then execute to run in there again (Sometimes a clean deploy might fix issues)
3. I have noticed that sometimes a plugin is not working in run mode, but working in generated debug APK or signed APK. (it is worth trying both of them)
4. Sometimes a plugin might not be working with -l, -livereload flag. So it is worth also trying to do so without having neither one of these.
5. Check if you are having the latest version of Angular, plugins, and Ionic. In your case (It is an old question so probably you already found the solution), but if you haven't yet updated Ionic, I would recommend updating to the latest Ionic CLI and Ionic Framework
6. Finally, the last troubleshooting path is to create an entirely blank project (while of course everything is updated to the latest stable releases) and then test the plugin there. If the plugin works, you put the two projects' configurations side by side and try to see the differences. This method helped me realized that a similar issue needed to upgrade Angular to version 9 in order to make it work. (Of course, the corresponding libraries needed to be upgraded as well, to match the Angular 9 version)

I hope that this guide you, or anyone else with a similar issue to the right troubleshooting path. Good luck!

Answer 2

In Android, in the photo-viewer.gradle file, replace:

compile 'com.commit451:PhotoView:1.2.4'
compile 'com.squareup.picasso:picasso:2.71828'

with:

implementation 'com.commit451:PhotoView:1.2.4'
implementation 'com.squareup.picasso:picasso:2.71828'