ImageViewer is not working in IONIC 3

[rohitup]

Dependency	Version
ionic	3.19.0
angular	5.0.3
ionic-img-viewer	2.9.0

I got an issue in my app while integrating Image Viewer in programmatic way below is the error that i am getting after calling this event.

 presentImage(myImage) {
    const imageViewer = this._imageViewerCtrl.create(myImage);
    imageViewer.present();
    setTimeout(() => imageViewer.dismiss(), 1000);
    imageViewer.onDidDismiss(() => alert('Viewer dismissed'));
  }

ERROR TypeError: imageElement.getBoundingClientRect is not a function at ImageViewerController.create (vendor.js:56244) at UploadImgPage.webpackJsonp.418.UploadImgPage.presentImage (0.js:221) at Object.handler (0.js:203) at ActionSheetCmp.click (vendor.js:52613) at Object.eval [as handleEvent] (ActionSheetCmp.html:1) at handleEvent (vendor.js:13608) at callWithDebugContext (vendor.js:15093) at Object.debugHandleEvent [as handleEvent] (vendor.js:14680) at dispatchEvent (vendor.js:10057) at vendor.js:10671

Kidly help me.

[Riron]

What's myImage ? Do you use it like this ? <img src="IMAGE_URL" #myImage (click)="presentImage(myImage)" />

[rohitup]

Thanks for reply actually I am showing the image in grid view below is the image HTML tag that I am using a style background image not src to show the image in grid view. Below is the HTML code and CSS if I use your code then I am unable to fix image height.

<img class="one-image" *ngFor="let image of item; let i= index" [style.background-image]="'url('+image+')'" #myImage (click)="imageOption(i,myImage)" />

CSS .one-image { float:left; position: relative; width: 30%; padding-bottom : 30%; / = width for a 1:1 aspect ratio / margin:1.66%; background-position:center center; background-repeat:no-repeat; background-size:cover; }

[Riron]

Ok, that's because #myImage does not reference the image itself but rather an array of images.

I haven't tried, but the basic idea is to rename #myImage to something like #images and in the imageOption() method do something like images.toArray()[i] (with i the given index) to get a reference to the corresponding image element.

[wiadev]

I'm using it on my lazy-loaded page in ionic v3 but got the following error.

Uncaught (in promise): Error: No component factory found for ImageViewerComponent. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ImageViewerComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (http://localhost:8100/build/vendor.js:4143:34)
    at CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:8100/build/vendor.js:4207:19)
    at DeepLinker.resolveComponent (http://localhost:8100/build/vendor.js:22827:20)
    at OverlayPortal.NavControllerBase._viewInit (http://localhost:8100/build/vendor.js:52434:45)
    at http://localhost:8100/build/vendor.js:52250:23
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4983:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242

I've put it in my page's module.ts, not app.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PropertyImagesModalPage } from './property-images-modal';
import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  declarations: [
    PropertyImagesModalPage,
  ],
  imports: [
    IonicPageModule.forChild(PropertyImagesModalPage),
    IonicImageViewerModule
  ],
})
export class PropertyImagesModalPageModule {}

Even I put it in app.module.ts, nothing happens when I click on image. Moreover, it should be worked on lazy-loaded page.

Thanks.

[mcelotti]

Hi, I'm having the same problem, nothing happens when I click on image. ionic 3.19.0, ionic-img-viewer 2.9.0. I've done the standard installation: https://github.com/Riron/ionic-img-viewer#installation

[tyl3r]

I'm using Ionic 3 too and is working ok, just add it on app.module.ts:

import { IonicImageViewerModule } from 'ionic-img-viewer';
imports: [
    IonicImageViewerModule
]

And use it like this in your pages: <img src="img-tn.jpg" imageViewer="img.jpg" />

[rohitup]

It is working fine with image src, not background image URL hence I am closing the issue. Thanks.

[Shivani-Parihar]

Does image viewer works on ionic-angular 3.7.1 ?

[Shivani-Parihar]

@tyl3r can you please let me know what version of ionic, angular and ion-img-viewer are you using?

[tyl3r]

@Shivani-Parihar

ionic - angular

cli packages: (C:\Users\-\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.6.0
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : C:\Users\-\AppData\Local\Android\Sdk

Misc:

    backend : pro

ion-img-viewer:

ionic-img-viewer@2.9.0

[derman10]

this plugin dont work anymore.