Ionic framework 使用Ionic 4中的本机相机获取后，图像不显示

我正在开发Ionic 4应用程序，我使用了摄像头本机插件来显示图像，但图像没有显示

这是我的编辑档案.page.html：

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

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:：错误\u未知\u URL\u方案

---

非常感谢您的帮助。

如果您想将所选图像加载到

img

标签，您可以尝试使用

@ionic native/file

插件

通过考虑是从gallery中选择图像还是使用camera拍摄图像，您必须执行两种不同的实现

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) => {

});

---

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

您是从图库中选择图像吗？@SudarshanaDayananda。我从图库和相机中选择图像，但在这两种情况下，图像都不显示。@SudarshanaDayananda。你能帮我一下吗？你试过把

sourceType

改成

PHOTOLIBRARY

？@SudarshanaDayananda。是的，它没有显示图像。我已经编辑了我的代码。请检查。错误：类型“File”上不存在属性“readAsDataURL”。是否安装了

@ionic native/File

节点模块？谢谢，它正在工作，但为什么您说有时它会工作。它对画廊和照相机都有效。每次都有效。我的意思是有时候它会对你有用。这取决于你的运气，兄弟…-）@Raghav，如果这对你有用的话。将答案标记为正确答案。