How to link local image with Photo Viewer

Ionic Native
1

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.

2

I really need this native, somebody help please.

3

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.

4

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

5

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.

6

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.

7

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.

8

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.

9

Thanks for your help.

10
  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')" />
3 Likes
11

Thanks for your help.

12

Will this work with an IOS build too?

13

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
14

well use an ngFor*
to call the function dynamically

15

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