从相机拍摄照片后图像没有刷新 [英] Image not refreshed after taking a photo from a camera

问题描述

我在ionic 2中使用了这个简单的代码:

I am using this simple code with ionic 2 :

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

然后这是我的Typescript页面:

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";
*/
}

}

拍照后，什么也不显示.我注意到Angular不会更新"src".我在使用"var image = ... image.src = ..."的注释中测试了部分代码，但直接操作了DOM，我不希望这样做.

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.

请问问题出在哪里?

推荐答案

尝试使用

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.

类似的东西:

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

这篇关于从相机拍摄照片后图像没有刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！