How to link local image with Photo Viewer

Hi,
I am using the native Photo Viewer.

Linking image at the web is easy:
this.photoViewer.show('http://otherWebsite/someImage.jpg');

But how do I link local image?
All my images is located at the src/assets/images/

Someone help and thanks in advance.

I really need this native, somebody help please.

Can’t do it. There is an issue open already. Search for another one which lets you open local images. I used that one finally.

Use this one https://github.com/keensoft/FullScreenImage-Cordova-Plugin/blob/master/README.md

Thanks for your help, but I am new to Ionic and I can’t find tutorial of this plugin.
I install this plugin with:
ionic cordova plugin add es.keensoft.fullscreenimage

but don’t how to import it.
Would you please tell me more?
Thank you.

No need to import anything. Just use as you would in ionic v1.

Add declare var FullScreen:any; on top of the file so that typescript does not throw an error.

Sorry, really need more help.
I add the code in the ts file:

viewPhoto() {
    var FullScreen: any;
    FullScreen.showImageURL('background.jpg');
  };

when I run the function, it throws error:
ERROR TypeError: Cannot read property 'showImageURL' of undefined

Would you please explain more, I am a newbie, just start learning Ionic.
Thank you so much.

Add it on top of the file like i said. You did not even read the code i had written.

Write declare var FullScreen:any at the starting of the code before or after import statements and not in a function. You need to learn angular 2 before using ionic 2.

Thanks for your help.

  1. install this => http://ionicframework.com/docs/native/file/
  2. on example.ts:
import { File } from '@ionic-native/file';

  constructor(public navCtrl: NavController, public navParams: NavParams
  ,private photoViewer: PhotoViewer
  ,private file: File
  ) { }

  onViewImg(img, title){
    console.log(this.file.applicationDirectory , img);
    this.photoViewer.show(this.file.applicationDirectory + img, title, {share: true});
  }
  1. on example.html:
    <img src="assets/img/exampleimg.jpg" (click)="onViewImg('www/assets/img/exampleimg.jpg','put a title here')" />
2 Likes

Thanks for your help.

Will this work with an IOS build too?

Blockquote

  1. install this => http://ionicframework.com/docs/native/file/
  2. on example.ts:
import { File } from '@ionic-native/file';

  constructor(public navCtrl: NavController, public navParams: NavParams
  ,private photoViewer: PhotoViewer
  ,private file: File
  ) { }

  onViewImg(img, title){
    console.log(this.file.applicationDirectory , img);
    this.photoViewer.show(this.file.applicationDirectory + img, title, {share: true});
  }
  1. on example.html:
    <img src="assets/img/exampleimg.jpg" (click)="onViewImg('www/assets/img/exampleimg.jpg','put a title here')" />

but what if i have many images and want to loop all images i means i have image slider with 500 images but i cant manually put url for each how i can loop it

well use an ngFor*
to call the function dynamically

My app closes as i click the image says the app has stopped working!