angular - Ionic 4 - 除了以下示例和文档外，照片查看器无法正常工作。图像不显示

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 {}

在 首页.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这个问题神奇地消失了。
可以解决此类问题的步骤:
虽然我还没有设法了解问题出在哪里，但在这种情况下或类似问题中，我建议您按照以下步骤进行故障排除:

停止进程并重新运行它

转到 Android 设备或 Android 模拟器(您正在测试应用程序的位置)，手动卸载应用程序，然后再次执行以在其中运行(有时全新部署可能会解决问题)

我注意到有时插件在 run 中不起作用模式，但在生成的 debug 中工作APK 或 signed APK。 (两者都值得一试)

有时插件可能无法与 -l 一起使用, -livereload旗帜。因此，在没有其中任何一个的情况下尝试这样做也是值得的。

检查您是否拥有最新版本的 Angular、插件和 Ionic。在你的情况下(这是一个老问题，所以你可能已经找到了解决方案)，但如果你还没有更新 Ionic，我建议你更新到最新的 Ionic CLI 和 Ionic Framework

最后，最后的故障排除路径是创建一个完全空白的项目(当然所有内容都更新到最新的稳定版本)，然后在那里测试插件。如果插件有效，您将两个项目的配置并排放置并尝试查看差异。这种方法帮助我意识到需要将 Angular 升级到版本 9 才能使其工作的类似问题。 (当然，相应的库也需要升级，以匹配 Angular 9 版本)

我希望这篇文章能指导您或其他有类似问题的人找到正确的故障排除途径。祝你好运!