使用Ionic 4中的Camera Native获取图像后未显示图像

Posted 2021-03-28

我正在使用Ionic 4应用程序，我使用Camera Native插件显示图像，但图像没有显示。

这是我的editprofile.page.html：

<img src="{{ imagepic }}" />

这是我的editprofile.page.ts：

imagepic: any;
imageuserchoose(sourceType){

    const options: CameraOptions = {
      quality: 100,
      sourceType: sourceType,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      allowEdit: true,
    }

    this.camera.getPicture(options).then((imageData) => {

     let base64Image = 'data:image/jpeg;base64,' + imageData;

     this.userdetailsedit.patchValue({
      profile_pic: base64Image,
     });
     this.imagepic = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
     // Handle error
    });
  }
    async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Select Image Source',
      buttons: [{
        text: 'Choose From Gallery',
        icon: 'images',
        handler: () => {
          this.imageuserchoose(this.camera.PictureSourceType.PHOTOLIBRARY);
        }
      },
      {
        text: 'Use Camera',
        icon: 'camera',
        cssClass: 'myActionSheetBtnStyle',
        handler: () => {
          this.imageuserchoose(this.camera.PictureSourceType.CAMERA);
        }
      },{
        text: 'Cancel',
        role: 'cancel'
      }]
    });
    await actionSheet.present();
  }

问题是，我无法在html中显示图像，因为它显示错误。

这是来自html的代码：

<img _ngcontent-c4="" src="unsafe:data:image/jpeg;base64,file:///storage/emulated/0/android/data/com.rflchallenges/cache/1553506541065.jpg">

错误：

无法加载资源：net :: ERR_UNKNOWN_URL_SCHEME

任何帮助深表感谢。

答案

如果您想将所选图像加载到img标记，可以尝试使用@ionic-native/file插件。

通过考虑是从图库中选择图像还是使用相机拍摄图像，您必须执行两个单独的实现。

constructor(private file: File) {}

this.camera.getPicture(options).then((imageData) => {

    if (sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {

        let path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
        let filename = imageData.substring(imageData.lastIndexOf('/') + 1);
        let index = filename.indexOf('?');
        if (index > -1) {

            filename = filename.substring(0,index);
        }
        this.file.readAsDataURL(path, filename).then(data => {

            this.imagepic = data;
        });
    }
    if (sourceType === this.camera.PictureSourceType.CAMERA) {

        let filename = imageData.substring(imageData.lastIndexOf('/') + 1);
        let path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
        this.file.readAsDataURL(path, filename).then(data => {

            this.imagepic = data;
        });
    }

}, (err) => {

});

试试这个吧。有时这会解决您的问题。