Handling Images

Hi All,

I am using Ionic 2, and am trying to capture and then save the image via JSON (saves to a database via a RESTful service), and then retrieve the image via JSON and display it.

I can get my device to capture the image with the Camera plugin:

import { Camera } from 'ionic-native';

  takePhoto() {
        Camera.getPicture({
            quality : 75,
            destinationType : navigator.camera.DestinationType.DATA_URL,
            sourceType : navigator.camera.PictureSourceType.CAMERA,
            allowEdit : false,
            encodingType: navigator.camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            saveToPhotoAlbum: false
        }).then(imageData => {
            this.zone.run(() => {
                this.base64Image = "data:image/jpeg;base64," + imageData;
            });
        }, error => {
            console.log("ERROR -> " + JSON.stringify(error));
        });
  }

I save the image to this.base64Image as result.avatar you can see. I then save the this.base64Image to a model object which is saved to a database successfully via JSON.

  saveImage() {
      this.employeeModel = this.dummyDataService.getDummyEmployee();          
      this.employeeModel.setAvatar(window.btoa(this.base64Image));
      this.employeeService.saveEmployee(this.employeeModel);
  }

The when I try to display the image by using the this.base64Image that was saved in the model employeeModel.avatar:

  <ionic-list inset>
    <ionic-item *ngFor="let result of employeeModels">
      <ion-avatar item-left><img ng-src="{{result.avatar}}"></ion-avatar>
      <h3>{{result.firstName}}</h3>
    </ionic-item>
  </ionic-list>

The result.firstName is displayed successfully, but the Image result.avatar is not displayed, and I get the following error.

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ng-src' since it isn't a known native property ("tar item-left><img ng-src="{{result.avatar}}"></ion-avatar>-->
          <ion-avatar item-left><img [ERROR ->]ng-src="{{result.avatar}}"></ion-avatar>
          <h3>{{result.firstName}}</h3>
          <p>{{resul"): SearchPage@23:37

Do I need to add window.atob({{result.avatar}}) or something? I have tried it exctly like this, but it didn’t work.

I have also tried the following when saving to the database successfully:

decodeURIComponent(window.atob(employeeModel.avatar))

And then tried to retrieve the image as such unsuccessfully (i.e. the error):

window.btoa(encodeURIComponent(avatar))

Any advise will be appreciated, thank you.

The error message is telling you exactly what is wrong. ng-src is not a proper property. Use <img [src]="result.avatar"> instead.

1 Like

Thanks rapropos. Success! Thank you it works now.

I tried:

<ion-avatar item-left><img [src]="result.avatar64"></ion-avatar>