Ionic 4 上的 Ion-img 损坏

Question

我正在执行以下代码，但在我的设备上我只能看到一张损坏的图像，没有任何信息（甚至等待一点时间让图像加载...），这是我的代码：

TypeScript

    goPhotoGallery() {
    const options: CameraOptions = {
      quality: 80,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      correctOrientation: true,
    }

    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64 (DATA_URL):
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.images = base64Image;
    }, (err) => {
      // Handle error
    });

HTML

    <ion-img [src]="images"></ion-img>

我应该怎么做才能正确显示图像？

Answer 1

使用括号{{images}}

<ion-content padding>

  <ion-card>
    <img src="{{ images }}"  />
  </ion-card>

</ion-content>

Answer 2

终于解决了：

destinationType: this.camera.DestinationType.DATA_URL,

而不是

destinationType: this.camera.DestinationType.FILE_URI,

结束

Ionic 4 上的 Ion-img 损坏

Ion-img corrupted on Ionic 4

image

ionic4