TAG IMG在离子项目中不起作用

Question

我拍照，我会在列表中的离子项目中显示图片。

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);
    });
  }
}

和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>

请注意来自离子项目标签的IMG标签。

以这种方式拍摄照片后，它显示了正确的图片，但是如果我将IMG标签放入标签图片后的离子项目中，则没有显示一张图片。要澄清，我的模板变为：

<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>

它不起作用，我不知道为什么。

注意：如果我使用ion-img标签，它不像img tag

Answer 1

"<ion-label>
 <ion-img  src=".."></ion-img>
</ion-label>
<ion-input></ion-input>"

Answer 2

我也有同样的问题，对我来说，对于(至少V3(，图像必须在离子标签内部，例如以下内容：

<ion-content padding> 
    <ion-list> 
      <ion-item button *ngFor="let lng of languages" (click)="select(lng.value)" >
        <ion-label text-wrap>
            <img src="{{lng.img}}" >
            {{ lng.text }}
        </ion-label>
        <ion-icon slot="end" name="checkmark" *ngIf="lng.value == selected"></ion-icon>
      </ion-item>
    </ion-list>
</ion-content>

Answer 3

尝试此

<ion-img src="..."></ion-img>