Image does not refresh after shooting from camera

Question

I am using this simple ionic 2 code:

<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 a picture, nothing is displayed. I noticed that "src" is not updated by Angular. I tested part of the code in the comments, which work using "var image = ... image.src = ..." but they manipulate the DOM directly, and I don't want that.

Please can you see where the problem is?

Answer 1

Try using zone.run () to re-enter the Angular zone from a task performed outside the Angular zone.

.

- :

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));
    }, {});
}

Answer 2

, :

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);

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

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

, function() {} () => {}, this this.url

Answer 3

, , , :

https://github.com/angular/angular/issues/6340#issuecomment-179712658

zone.run() , ,

export class PicutrePage {
  constructor(app: IonicApp, nav: NavController, params: NavParams, NgZone zone) {
    this.nav = nav;
    this.thumbnail = 'img/placeholder.png';    
    this.zone = zone;
  }

Answer 4

I solved a similar problem by adding '?' + a random number after the image URI (for example, myImage.jpg? 74374565346). At the same time, the hybrid application container (browser) is forced to update when the image is updated.

This solution works if you change the image on the local file system but use the same URI or file name.