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.