Question

在Ionic 2中，来自<img>的src未在插件的回调中更新。

模板：

<img [src]="avatar_path" id="myimg" />

使用Camera插件，我有以下内容：

navigator.camera.getPicture( imageBase64 => {
    this.avatar_path = 'data:image/png;base64,' + imageBase64;
},
error => {
    console.log(error)
}, {
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    destinationType: 0,
    allowEdit:true,
    sourceType: 2
})

没有任何反应。如果我用普通的js设置src它可以工作：

document.getElementById("myimg").src = 'data:image/png;base64,' + imageBase64;

如果我在回调之外设置avatar_path，它就可以工作。

this.avatar_path = 'data:image/png;base64,someharcodedbase64data';

似乎视图没有在回调中更新。在Ionic 1中，我会尝试重新渲染处理$ scope或类似的东西，但我不知道Ionic 2的最佳实践是什么。

Answer 1

你需要在NgZone里面运行this.avatar_path = 'data:image/png;base64,' + imageBase64;。

请尝试以下代码：

import {NgZone} from 'angular2/core';
...
constructor(_zone: NgZone) {
   this._zone = _zone;
}
... 
navigator.camera.getPicture( imageBase64 => {
this._zone.run(() => {
    this.avatar_path = 'data:image/png;base64,' + imageBase64;      
});
}

离子2：来自img的src没有更新

1 个答案: