Binding don't work with promise

Ionic Framework ionic-v3
1

the binding stopped working properly in the latest version, when I make the promise of the camera put the src of the image, but I must touch the screen to refresh and charge the image, not before this happened, it was immediately before appeared image.

html

<img src={{src}}/>

script

 takePhoto(){
      
            
            Camera.getPicture(this.options).then((imageData) => {
               this.src = imageData;
            }, (err) => {
            });
       
    }
2

Have you investigated using the AsyncPipe?

3

Hi @DiegoHD,

You can inject NgZone, which helps your component to provide updates to UI Views.

 constructor(private ngZone: NgZone) {

 }
 
takePhoto(){
    Camera.getPicture(this.options).then((imageData) => {
       this.ngZone.run(() => {
          this.src = imageData;
      });
    }, (err) => {
    });
}
4

your img-tag should look like that:

<img [src]="src">
1 Like
5

@bengtler is correct, you need to create a dynamic property for the image source.

http://learnangular2.com/templates/

import {Page} from 'ionic-angular';
import {Camera} from 'ionic-native';
@Page({
  template: `
<ion-content class="home">
  <img [src]="src" alt="img">
  <button (click)="takePhoto()" block>photo</button>
</ion-content>

  `
})
export class HomePage {
  src;
  constructor() { }
  takePhoto() {
    Camera.getPicture()
      .then((imageData) => {
        this.src = imageData;
      }, (err) => {
      });
  }
}
6

Hello guys,
With [src] =“src”, works but with the same problem, I have touch the screen to show image, with ngzone I could not make it work.

However now works, with [src] =“src” and src={{src}}

I only update to ionic 2.0.0-beta. 25

Thanks for help me