Ionic 3 Image Viewer Example – Load Assets Folder Images

In this post, we will discuss on how to show local images in application asset’s images folder in Image / Photo viewer having basic functionalities like Pan, Zoom, Share download image on device etc.

In this example application, we will add an image in application src folder at path “~src/assets/images/freaky_jolly_logo.jpg” then using File we will show the image using Photo-viewer plugin.

Also, See: Ionic 3 Share and Save Images from Application’s Assets Folder to Device.

Ionic 4 – Implement Image Viewer for Photos in the Assets folder

Create new Ionic 3 application by running the following commands

$ ionic start Ionic3PhotoImageViewerDemo blank
$ cd Ionic3PhotoImageViewerDemo

Install Cordova and Ionic Native plugins

Run following commands to install File and Photo-viewer.

$ ionic cordova plugin add cordova-plugin-file
$ npm install --save @ionic-native/file

$ ionic cordova plugin add com-sarriaroman-photoviewer
$ npm install --save @ionic-native/photo-viewer

Import native plugins in app.module.ts

After imports and adding, providers for added plugins file will look like this

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { PhotoViewer } from '@ionic-native/photo-viewer';
import { File } from '@ionic-native/file';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    PhotoViewer,
    File,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

Add button in home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Photo Viewr from Asset Folder Demo
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <p>View Photo From Application's Assets Folder<br>
  <button ion-button (click)="viewPhoto()">View Photo</button>
  </p>

</ion-content>

In home.ts we will add events

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PhotoViewer } from '@ionic-native/photo-viewer';
import { File } from '@ionic-native/file';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

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


    viewPhoto() {
      let imageName = "freaky_jolly_logo.jpg";
      const ROOT_DIRECTORY = 'file:///sdcard//';
      const downloadFolderName = 'tempDownloadFolder';
      
      //Create a folder in memory location
      this.file.createDir(ROOT_DIRECTORY, downloadFolderName, true)
        .then((entries) => {
   
          //Copy our asset/img/freaky_jolly_logo.jpg to folder we created
          this.file.copyFile(this.file.applicationDirectory + "www/assets/images/", imageName, ROOT_DIRECTORY + downloadFolderName + '//', imageName)
            .then((entries) => {
   
              this.photoViewer.show(ROOT_DIRECTORY + downloadFolderName + "/" + imageName, 'Do you want to Share', {share: true});
              
             })
            .catch((error) => {
              alert('1 error ' + JSON.stringify(error));
            });
        })
        .catch((error) => {
          alert('2 error' + JSON.stringify(error));
        });
    }


}

In method viewPhoto() we are creating a new directory at device root storage, the image (freaky_jolly_logo.jpg) to be viewed will be copied from assets folder to the folder then we will open the image from device folder “tempDownloadFolder” to view in Photo-viewer. We can’t view image from application src folder so we need to copy a file in memory first to open.