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';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}


Add button in home.html

      Photo Viewr from Asset Folder Demo

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


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';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

    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) => {
     + 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.

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *