I am trying to load images with my ionic 3 app, using image-picker plugin.here is the content of my package.json file :
{"name": "app name","version": "0.0.1","author": "Ionic Framework","homepage": "http://ionicframework.com/","private": true,"scripts": {"clean": "ionic-app-scripts clean","build": "ionic-app-scripts build","lint": "ionic-app-scripts lint","ionic:build": "ionic-app-scripts build","ionic:serve": "ionic-app-scripts serve" },"dependencies": {"@angular/common": "5.0.3","@angular/compiler": "5.0.3","@angular/compiler-cli": "5.0.3","@angular/core": "5.0.3","@angular/forms": "5.0.3","@angular/http": "5.0.3","@angular/platform-browser": "5.0.3","@angular/platform-browser-dynamic": "5.0.3","@ionic-native/base64": "^4.5.3","@ionic-native/core": "4.4.0","@ionic-native/image-picker": "^4.5.3","@ionic-native/photo-viewer": "^4.5.3","@ionic-native/splash-screen": "4.4.0","@ionic-native/status-bar": "4.4.0","@ionic/storage": "2.1.3","com-badrit-base64": "^0.2.0","com-sarriaroman-photoviewer": "^1.1.16","cordova-android": "^6.2.2","cordova-plugin-compat": "^1.2.0","cordova-plugin-device": "^2.0.1","cordova-plugin-ionic-keyboard": "^2.0.5","cordova-plugin-ionic-webview": "^1.1.16","cordova-plugin-splashscreen": "^5.0.2","cordova-plugin-telerik-imagepicker": "^2.1.8","cordova-plugin-whitelist": "^1.3.3","firebase": "^4.10.1","ionic-angular": "3.9.2","ionicons": "3.0.0","rxjs": "5.5.2","sw-toolbox": "3.6.0","zone.js": "0.8.18" },"devDependencies": {"@ionic/app-scripts": "3.1.8","typescript": "2.4.2" },"description": "An Ionic project","cordova": {"plugins": {"cordova-plugin-whitelist": {},"cordova-plugin-device": {},"cordova-plugin-splashscreen": {},"cordova-plugin-ionic-webview": {},"cordova-plugin-ionic-keyboard": {},"cordova-plugin-compat": {},"com.synconset.imagepicker": {"PHOTO_LIBRARY_USAGE_DESCRIPTION": "We need to access to your library" },"com-badrit-base64": {},"com-sarriaroman-photoviewer": {}},"platforms": ["android"] }}when i want to access to use the plugin for image selection, here is the code i use in a file named publish.ts
take_pictures() { this.picke.requestReadPermission().then(fullfilled => { this.picke.getPictures({ quality: 65, maximumImagesCount: 10, width: 500, height: 500, outputType: 1 //to convert to base64 image once selected }).then(data => { for (let i = 0; i < data.length; i++) { /* this.base64.encodeFile(data[i]).then(d=>{ alert(d) this.annonce.photo.push(d) }) */ /*.then(res=>{*/ // this.annonce.photo.push(this.getBase64Image(data[i])); /* alert(res) })*/ this.annonce.photo.push(("data:image/png;base64,"+ data[i])); //alert(data[i]); } }).catch(e => { this.toast.create({ message: e.message, showCloseButton: true, closeButtonText: "Okay", dismissOnPageChange: true, duration: 30000 }).present() })}, rejected => { this.alert.create({ message : "Please you have to select at least one picture", buttons :[{ text : "Ok", role:"cancel" }] }).present();})}This other method use the photoviewer plugin to make sure that when the user click on a picture, he can see it in a larger format :
see_photo(imag) { this.viewer.show(imag);} To display images, i use a a file named publish.html. here is a code snippet of it.
<ion-item no-lines><p align="center">Pictures</p></ion-item><button ion-item color="primary" block (click)="take_pictures()"> take pictures</button><ion-list><ion-card *ngFor="let imag of this.annonce.photo"><img [src]="imag" (click)="see_photo(imag)" /><button (click)="del_photo(imag)" ion-button color="primary">Supprimer</button></ion-card></ion-list>When images are selected, application crash. But if i select for exemple only one inage everythings works fine. But with moere than one image either application become very slow, or it crashes.
any help ?