在阅读了Stack Overflow和其他网站上的所有相关文章,包括Ionic文档后,我无法让这个工作。我试图复制相同的,所以目前我有:
在应用程序模块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 {}
位于主页.页面.ts中
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
export class HomePage {
constructor(private photoViewer: PhotoViewer) { }
openImage() {
this.photoViewer.show(''../assets/baluarte.jpg');
}
}
以及在主页ts中
<ion-content padding>
<img src="../assets/baluarte.jpg" (click)="openImage()"/>
<ion-button (click)="openImage()">View</ion-button>
</ion-content>
我想实现的是有图片显示,当我点击离子提到 * 您的图像在全屏与平移,缩放和共享图像的能力 *。然而,我试图在同一时间有一个按钮具有相同的功能,只是为了确保错误不在图像中。
也在里面
this.photoViewer.show(''../assets/baluarte.jpg');
我也尝试与一个网址,因为我不确定它可以与本地文件,但它也不工作
this.photoViewer.show('https://images.app.goo.gl/cW8jBeX33H9GKAon9.jpg')
我的最终目标是使用本地文件。
我当然安装了
ionic cordova plugin add com-sarriaroman-photoviewer
npm install @ionic-native/photo-viewer
2条答案
按热度按时间xe55xuns1#
虽然这不是一个100%有保证的解决方案,但我希望它能引导你走上正确的方向。
我遇到了完全相同的问题,由于某种原因,它已经自行解决,实际上没有对我的代码做任何修改。
一点背景:
我有一个巨大的项目,使用了许多原生Cordova插件,因此每当我想添加一个新插件,我总是首先在一个空白项目中测试它,以避免与大的混乱。所以我创建了一个新的空白项目,并测试了原生PhotoViewer。它在Android模拟器上的工作正如预期。
然后我移到我的默认大项目,并遵循完全相同的步骤,但什么也没有发生。我得到了与您完全相同的行为。我正在执行
ionic cordova run android -l -c
,但它没有工作。所以我所做的唯一事情是ctrl + c
(取消进程),然后执行ionic cordova run android -l -c
,问题神奇地消失了。解决此类问题的步骤:
虽然我还不知道问题出在哪里,但在这种情况下或类似的问题中,我建议采取以下步骤进行故障排除:
1.停止进程并重新运行
1.转到Android设备或Android Emulator(您正在测试应用的位置),手动卸载应用,然后执行以再次在其中运行(有时,干净部署可能会修复问题)
1.我注意到,有时候一个插件不是在
run
模式下工作,而是在生成的debug
APK或signed
APK下工作。(这两个都值得一试)1.有时候一个插件可能无法使用
-l
,-livereload
标记,所以也值得尝试在没有这两个标记的情况下使用。1.检查你是否有最新版本的Angular,插件,和Ionic.在你的情况下(这是一个老问题,所以可能你已经找到了解决方案),但如果你还没有更新Ionic,我建议更新到最新的Ionic CLI和Ionic框架
1.最后,最后一个故障排除路径是创建一个完全空白的项目(当然所有的东西都更新到最新的稳定版本),然后在那里测试插件。如果插件工作,你把两个项目的配置并排,并试图看到差异。这种方法帮助我意识到,类似的问题需要升级到版本9的Angular,以使其工作。(当然,相应的库也需要升级,以匹配Angular 9版本)
我希望这篇文章能指导你,或者其他任何有类似问题的人找到正确的故障排除路径。祝你好运!
9vw9lbht2#
您正在使用本Map像路径。
在文档中,它是明确给出,这个插件的目的是显示从一个URL到一个具有缩放功能的照片查看器的图片。
我创建了一个小演示与离子6角和张贴在我的渠道,你可以看到它是如何工作的。https://www.youtube.com/watch?v=q_FknLrJ_Kg&t=67s