Ionic 4 | Implement Image Viewer for Photos in Assets folder

Last Updated On 11/Mar/2019 for Latest Ionic Version 4.11.0

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 Read: Ionic 3 – Implement Image Viewer for Photos in the Assets folder.

Also Read: Ionic | Crop Images using Ionic 4 native plugin with Image Picker

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. applicationStorageDirectory will get storage path, we can’t view image from application src folder so we need to copy a file in memory first to open.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

7
Leave a Reply

avatar
4 Comment threads
3 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
DISMI PAULJolly.exeAlex SoaresselvamGupta Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Gupta
Guest
Gupta

I am using actionsheet buttons to view image and when i click on view image i am getting error as follows ”
Error: exec proxy not found for :: PhotoViewer :: show”

selvam
Guest
selvam

ionic 4:
Native: tried calling PhotoViewer.show, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Alex Soares
Guest
Alex Soares

it doesn’t work, when I try to build it to android I get an error:
“platforms\android\src\com\sarriaroman\PhotoViewer\PhotoActivity.java:171: error: cannot find symbol
picasso.fit();”

the plugin isn’t working on ionic 4

DISMI PAUL
Guest
DISMI PAUL

GETTING THIS. WHY IS IT SO?
Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
cordova.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/assets/icon/favicon.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND