Ionic 4 | Implement Image Picker in Ionic Application using Cordova and Native Plugin

In Ionic applications, we may have support to select multimedia data by a user like images, for that we can show an Image Picker feature for easy selection of Images. In this post, we will discuss How to Add image Picker Ionic native Plugin. After adding this Cordova and native plugin you can easily choose images and show selected images on the page.

We can easily adjust quality, number images to select, height and width of images which will be selected from the user directory.

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

let’s get started.

Create a new Ionic 4 App using below CLI command

Install Cordova and Ionic Native Plugin

Import Plugin in App’s Main Module

In app.module.ts file import plugin and add in providers array

Home Component and HTML template

In file replace following code. This is having the getPictures method which will open Image Picker UI and after selection will return selected images which we are putting in an array as a set of Base64 urls to show in the Home template.

In file replace following code, having a button to open Image Picker module, after that selected images will be shown in *ngFor iteration.

For styling Selected Images like Pinterest replace following in


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

Leave a Reply

2 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
4 Comment authors
GaneshmostafaJolly.exeMarcos Ribeiro Recent comment authors
newest oldest most voted
Notify of
Marcos Ribeiro
Marcos Ribeiro

Great article about Styling Ionic 4!


im use ionic 4 but i have error : plugin_not_installed


I’m unable to do this. when I click select image, the app is exiting.