When working with Ionic 2, I encountered an issue where the src attribute of an <img> element was not updating inside the callback function of a plugin.
Here is the template code:
<img [src]="avatar_path" id="myimg" />
After using the Camera plugin, the following code snippet was employed:
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
})
Unfortunately, nothing happened. However, manually setting the src attribute using plain JavaScript worked:
document.getElementById("myimg").src = 'data:image/png;base64,' + imageBase64;
Addtionally, if I set the avatar_path value outside the callback function, it works as expected:
this.avatar_path = 'data:image/png;base64,someharcodedbase64data';
It appears that the view is not updating within the callback function. In Ionic 1, I would handle such situations by re-rendering the view using $scope or a similar method, but I am unsure about the best practices for addressing this issue in Ionic 2.