Ionic4 - 除了以下示例和文档之外，PhotoViewer 无法正常工作。图像不显示

Question

在阅读 StackOverFlow 和其他站点（包括 Ionic 文档）中的所有相关帖子后，我无法使其正常工作。我试图复制相同的东西，所以目前我有：

在app.module.ts

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

和

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

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

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

并在 home.page.ts

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

我想要实现的是显示图片，当我单击时，Ionic 会全屏提及您的图像，并能够平移、缩放和共享图像。但我同时尝试使用具有相同功能的按钮，以确保错误不在图像中。

还有里面

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

我也在尝试使用 url，因为我不确定它是否可以与本地文件一起使用，但它也无法正常工作

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

我的最终目标是使用本地文件。

PS：当然我安装了

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

谢谢你的支持

Answer 1

虽然这不是 100% 有保证的解决方案，但我希望它能引导您走向正确的方向。

我遇到了完全相同的问题，并且由于某种原因，它已自行解决，而无需对我的代码进行任何修改。

一些背景：

我有一个巨大的项目，使用许多本机 Cordova 插件，因此每当我想添加新插件时，我总是首先在一个空白项目中测试它，以避免弄乱大项目。所以我创建了一个新的空白项目并测试了 Native PhotoViewer。正如预期的那样，它在 Android 模拟器上运行。

然后我转移到我的默认大项目并遵循完全相同的步骤，但什么也没有发生。我的行为与你完全相同。我正在执行ionic cordova run android -l -c，但它不起作用。因此，我所做的唯一一件事就是ctrl + c（取消该过程）然后执行ionic cordova run android -l -c，问题就神奇地消失了。

可以解决此类问题的步骤：

虽然我还没有弄清楚问题出在哪里，但在这种情况或类似问题中，我建议按照以下步骤进行故障排除：

1. 停止该进程并重新运行它
2. 转到 Android 设备或 Android 模拟器（您正在测试应用程序的位置），手动卸载应用程序，然后再次执行以在其中运行（有时干净部署可能会解决问题）
3. 我注意到有时插件无法在run模式下工作，但在生成的debugAPK 或signedAPK 中工作。（两者都值得尝试）
4. 有时插件可能无法与-l,-livereload标志一起使用。因此，在没有这些的情况下尝试这样做也是值得的。
5. 检查您是否拥有最新版本的 Angular、插件和 Ionic。对于您的情况（这是一个老问题，所以您可能已经找到了解决方案），但如果您尚未更新 Ionic，我建议更新到最新的 Ionic CLI 和 Ionic Framework
6. 最后，最后的故障排除路径是创建一个完全空白的项目（当然，所有内容都更新到最新的稳定版本），然后在那里测试插件。如果插件有效，您可以将两个项目的配置并排放置并尝试查看差异。这个方法帮助我意识到类似的问题需要将 Angular 升级到版本 9 才能使其工作。（当然，相应的库也需要升级，以匹配Angular 9版本）

我希望这可以指导您或其他有类似问题的人找到正确的故障排除路径。祝你好运！