Load image from Photo Gallery

Hello!

I want to load an image from the photo gallery into the app. I installed the Camera plugin and added it to my app’s module. I’m running this code :

app.component.ts :

import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  templateUrl: 'app.html',
})

 export class MyApp {

 constructor(public camera : Camera){
     this.avatar = "somedefaultimage";
 }
 choosePhoto(){
   const options: CameraOptions = {
   quality: 100,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE,
   sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
   }

   this.camera.getPicture(options).then((imageData) => {
   // imageData is either a base64 encoded string or a file URI
   // If it's base64:
   this.avatar = 'data:image/jpeg;base64,' + imageData;
   }, (err) => {
   // Handle error
   });
 }
}

app.html :

<ion-menu [content]="mycontent" type='reveal' id='menu'>
 <ion-header>
 <ion-toolbar style="padding-top:0; padding-left:0;padding-right:0;padding-bottom:0">
   <img src={{avatar}} style="width:20%" (click)="choosePhoto()">
 </ion-toolbar>
 </ion-header>
</ion-menu> 
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>

When I click the image, nothing happens, even though I expect choosePhoto() to run and open the image gallery. Why is nothing happening? Am I missing something if I want to be able to see the gallery and select a photo?

A potential multitude of situations…

  • Are you running this from an actual device as opposed to a web browser? (i.e. ionic serve)
  • If running on an actual device - do you have any error messages in the chrome debugger tool?

By all means if you would like to share your code with me via git or whatever please do.

Ran it on an android device, and it didn’t work. Wouldn’t expect it to work on a browser of course. I’ve shared my code above, do you see anything wrong with it?

Code looks fine I think.

Compare with the one I’ve just cooked up…

1 Like

Great repository you’ve got there! I’d love to use it for further reference.

I feel like I’m missing a step somewhere along the way. To be honest, I’ve never got an ionic-native plugin to work, including the SMS plugin. I always follow the steps in the documentation but end up with no result. Really lost here. Could it have anything to do with the device’s access to the native features?

This:
<img src={{avatar}} style="width:20%" (click)="choosePhoto()">

Should be this:
<img [src]="avatar" style="width:20%" (click)="choosePhoto()">

I can’t promise that this is the root of your issue, but either way that’s the route you want to go.

1 Like

I literally cooked that up in like 10 minutes, and basically pasted your function straight in.

Are you adding the ‘Camera’ class to the app.module.ts in the providers section? I don’t know - that’s why I asked to see your whole repo and not just a tiny excerpt - hate playing 20 questions and often find it quicker just writing it up myself and putting it up on git.

Going to change that. Thank you!

Yup, added it in the providers array in app.module.ts. Have you tested your repo’s code on a real device? Did it work?

On an Android - have YOU tested my code on a device?

@Sidharth_1999’s answer is completely sound.

Good idea! I’ll test your code on a real device and update my results on the thread. Right now I should probably go to bed cause I have school tomorrow haha.

Thanks for the help you’ve provided so far!

Np’z. Sleep and general education are very important… so I’m told :wink:

1 Like

By people who own stock in sleep, and general education…

1 Like