Image not refreshed after taking a photo from a camera

Question

I am using this simple code with ionic 2 :

<button (click)="takePicture()" >Take a pic!</button>
<img [src]="url || '//:0'">

Then this is my Typescript page :

import {Page} from "ionic-framework/ionic";

@Page({
    templateUrl: 'build/pages/smartscan/smartScan.html'
}
)

export class SmartScan {

public url:string;

constructor() {
    console.log("Starting SmartScan page ...");
}

public takePicture() {
    console.log("Going to take a pic ...");
    navigator.camera.getPicture( (imageURI) => {

        this.url = imageURI;

        console.log("URI of the picture taken is : "+this.url);

        console.log(JSON.stringify(this));

        //var image = document.getElementById('myImage');
        //image.src = imageURI;

    }, function (err) {
        console.log(JSON.stringify(err));
    }, {});

   /* this.url = "http://maison-cresci.fr/uploads/images/nice_cresci_slide_environnement_003.jpg";
*/
}

}

After taking the picture, nothing is displayed. I noticed that the "src" is not updated by Angular. I tested a part of the code in comments thats works using "var image= ... image.src=..." but is directly manipulating the DOM and I don't want this.

Please can you see where the problem is ?

Answer 1

Try to use zone.run() to reenter Angular zone from a task that was executed outside of the Angular zone.

That worked for me for async tasks with local storage.

Something like:

public takePicture() {
    console.log("Going to take a pic ...");
    navigator.camera.getPicture((imageURI) => {

         console.log("URI of the picture taken is : "+imageURI);
         zone.run(()=>{ this.url = imageURI; })

        //var image = document.getElementById('myImage');
        //image.src = imageURI;

     }, (err) => {
         console.log(JSON.stringify(err));
    }, {});
}