Styjun

I am working on Ionic 4 app and I have used the Camera Native plugin for showing the image but the image is not showing.

This is my editprofile.page.html:

<img src=" imagepic " />

This is my 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();
 

The problem is that, I am not able to show the image in the html because it is showing the error.

This is the code that is coming to the html:

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

Error:

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

Any help is much appreciated.

If you want to load selected image to the img tag you can give a try using @ionic-native/file plugin.

You have to do two separate implementations by considering whether you are selecting image from gallery or take an image using 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) => 

);

Try this one. Sometimes this will fix your issue.