Introduction

Ionic is an open-source framework. It's a very popular cross-platform mobile app framework which is helpful to develop or build hybrid mobile apps easily. It will save a lot of time and money for investment.
This article demonstrates how to select multiple images and load images in the ionic application page using native camera plugin in ionic 3. The following tools and requirements should be prepared before reading this article.
Once we have installed Node.js we can install other tools on the terminal or command line. Run the following command step by step.
npm install -g ionic Cordova
Once the installation is finished let’s start creating an ionic 3 app.
Create Ionic 3 app
Open your Node.js terminal and open a specific location to create ionic 3 apps.
Start a new Ionic project using ionic start command,
ionic start myApp
This command will take a few minutes as it installs all dependencies and modules for a project.
Now, change the location to myApp
cd myApp
Once changed, the location myApp, Add android platform to the app.
Now, run a project using the following command.
Make sure you have connected the device and settings have been set.
Now let’s start,
The Image Picker Plugin is used to select multiple images.
Step 1
Follow the below-mentioned steps to install the Image Picker plugin to our app.
ionic Cordova plugin add Cordova-plugin-Telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
npm install --save @ionic-native/image-picker
Step 2
Add Camera plugin to your app module.
app.module.ts file
  1. //here importing lines for access camera object and file plugin to our app.
  2. import { ImagePicker } from '@ionic-native/image-picker';
  3. @NgModule({
  4. providers: [
  5. //here added class to our provider service block
  6. ImagePicker
  7. ]
  8. })
  9. export class AppModule { }
Step 3
Integrate image picker with component part in our app.
Sample.ts File
  1. import {
  2. ImagePicker,
  3. ImagePickerOptions
  4. } from '@ionic-native/image-picker';
  5. //here creating a imageLists variable as array for store a base64 image data.
  6. public imageLists: any[] = [];
  7. //here injecting imagePicker class to our component part as object
  8. constructor(private imagePicker: ImagePicker) {}
  9. public loadMultipleImageFromGallery() {
  10. let options: ImagePickerOptions = {
  11. //here Quality of images, defaults to 100
  12. quality: 100,
  13. //here Width of an Image
  14. width: 600,
  15. //here Height of an Image
  16. height: 600,
  17. /** Output type, defaults to 0 (FILE_URI).
  19. * FILE_URI :0 (number) it returns a actual path for an image
  21. */
  22. DATA_URI: 1(number) it returns a base64 data
  23. for an image
  24. outputType: 1
  25. //here Maximum image count for selection, defaults to 15.
  26. maximumImagesCount: 15(1 - 15) numbers
  27. //while setting a number 15 we can load 15 images in one selection.
  28. };
  29. this.imagePicker.getPictures(options).then((results) => {
  30. for (let index = 0; index < results.length; index++) {
  31. //here iam converting image data to base64 data and push a data to array value.
  32. this.imageLists.push('data:image/jpeg;base64,' + results[index]);
  33. }
  34. console.log(“Image Lists”, this.imageLists);
  35. }, (error) => {
  36. // Handle error
  37. console.log(“Error occurred
  38. while loading”, error);
  39. });
  40. }
Step 4
Here is the code to display images in our pages. Here, first I am checking if imageLists is available or not. Next check if imageLists length has been greater than zero(0). Then I use [src] Propety Binding to bind base64 data to img source tag.
  1. <ng-container *ngIf="imageLists">
  2. <ion-item>
  3. <ion-label>Browsed Images</ion-label>
  4. </ion-item>
  5. <ion-item>
  6. <ion-row *ngIf="imageLists.length>0">
  7. <ion-col style="padding:10px;" col-3 *ngFor="let image of imageLists;">
  8. <ion-card>
  9. <ion-thumbnail item-start>
  10. <img [src]="image" alt="Sample Image">
  11. </ion-thumbnail>
  12. </ion-card>
  13. </ion-col>
  14. </ion-row>
  15. </ion-item>
  16. </ng-container>
For further image, picker plugin details visit the official website.

Summary

In this article, I have discussed how to select multiple images and load images in our ionic application page using native camera plugin in ionic 3. If you have any questions/issues about this article, please let me know in the comments.