Tag img doesn't work in ion-item

Ionic Framework ionic-v3
1

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

2

Because you didn’t put any item placement directives on it.

3

add item-start or item-end to your img

4

I got it!
Many Thanks Guys!