Hi guys, I have a stupid behaviour in my app.
I take a picture and I would show the picture in an ion-item inside a list.
photo.ts:
@IonicPage()
@Component({
selector: 'page-photo',
templateUrl: 'photo.html',
})
export class PhotoPage {
public base64Image: string;
constructor(
private camera: Camera
) {
}
takePicture(){
this.camera.getPicture({
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true
}).then((imageData) => {
this.base64Image = "data:image/jpeg;base64," + imageData;
}, (err) => {
console.log(err);
});
}
}
and the photo.html
<ion-content padding>
<ion-list>
<ion-item>
<ion-label fixed>Comment</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Picture</ion-label>
</ion-item>
<img [src]="base64Image" *ngIf="base64Image" />
</ion-list>
<button ion-button (click)="takePicture()" block>Take a picture</button>
</ion-content>
Please note the img tag out of ion-item tag.
In this way, after take a picture, it shows correctly the picture, but if I put the img tag inside ion-item after label Picture, no one picture is showed. To clearify, my template becomes:
<ion-content padding>
<ion-list>
<ion-item>
<ion-label fixed>Comment</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Picture</ion-label>
<img [src]="base64Image" *ngIf="base64Image" /> --> _here the difference_
</ion-item>
</ion-list>
<button ion-button (click)="takePicture()" block>Take a picture</button>
</ion-content>
it doesn’t work.
I don’t know why.
Please help me
Thanks