# Handling Images

**URL:** <https://forum.ionicframework.com/t/handling-images/57501>\
**Category:** ionic-v3\
**Created:** [July 14, 2016, 3:19pm UTC](https://forum.ionicframework.com/t/handling-images/57501 "2016-07-14T15:19:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [July 14, 2016, 3:19pm UTC](https://forum.ionicframework.com/t/handling-images/57501/1 "2016-07-14T15:19:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 14, 2016, 9:23pm UTC](https://forum.ionicframework.com/t/handling-images/57501/2 "2016-07-14T21:23:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [July 14, 2016, 9:32pm UTC](https://forum.ionicframework.com/t/handling-images/57501/3 "2016-07-14T21:32:27Z")

</div>

Thanks rapropos. Success! Thank you it works now.

I tried:

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