Ionic 4 | Implement Image Viewer for Photos in Assets folder

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/logo.jpg” then using File we will show the image using Photo-viewer plugin.

Also, See: Ionic 3 – Implement Image Viewer for Photos in the Assets folder.

Create new Ionic 4 application by running the following commands

Install Cordova and Ionic Native plugins

Run following commands to install File and Photo-viewer.

Import native plugins in app.module.ts

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

 

Add button in home.page.html

In home.page.ts we will add events

In method viewPhoto() we are creating a new directory at device root storage, the image (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.

Leave a Reply

avatar
  Subscribe  
Notify of