Unable to display image using FILE_URI

You saved my day. Thank you :slight_smile:

This works for me, thank you so much :kissing_heart:

The instruction are here

All you have to do is sanitize the path as
this.image = window.Ionic.WebView.convertFileSrc(imageData);

and it works like charm!!

8 Likes

In ionic v3,just like yours:
this.image = (<any>window).Ionic.WebView.convertFileSrc(imageData);

5 Likes

thanks, it works for me too

If I use ReadAsDataUrl, it works but it is very slow on Android to create the bae64 image. It takes 4 to 5 seconds for a medium resolution photo. The WebView solution is only in beta(?) so I am hesitant to use beta code.

What is so strange to me, is that the code below worked in an app I wrote in the spring of 2018. And it still works.

takePicture(opts: CameraOptions) {
this.camera.getPicture(opts).then((imageData) => {
this.myImage = imageData;
}, (err) => {
console.log(err);
});
}

I did notice the old native wrapper for @ionic-native/camera was 4.5.3. Now I am working with 4.17.0. My guess is that this new wrapper caused the code not to work. Any help is appreciated.

thankss alot , you make my day

Hi JALO!

I faced the same trouble after updating Ionic and adding A Blank App for Testing. The image was coming broken. I found a temporary solution by using the Earlier Ionic Blank Template and transferred the SRC and config.xml only. Then it worked. But it was a temporary fix.

After reading your post, I came to know about the Update related to FILE_URI.

Thanks A Lot

worked for me , thanks you saved my day.

1 Like

Hey I solved that problem.I struggled 2 days for this problem.After that i had an idea.Why can we convert file uri to base64 image after that by using DomSanitizer we can easily set the base64 image tot he img src tag.Please follow below steps we can easily solve that problem
1.Install the base64 plugin
https://ionicframework.com/docs/native/base64/
2.By using base64 plugin we can convert file_uri to basse 64 image.
openCamera() {
const options: CameraOptions = {
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
targetWidth: 1000,
targetHeight: 1000,
correctOrientation:true
}
this.camera.getPicture(options).then((imageData) => {
this.base64.encodeFile(imageData).then((base64File: string) => {
this.base64Image =base64File;
}, (err) => {
console.log(err);
alert(err);
});

}, (err) => {
  console.log(err);
})

}
3.Initialize DomSanitizer in constructor
constructor( private domSanitizer: DomSanitizer);

4.By using domsanitizer we can display the image in html page
<img [src]=“domSanitizer.bypassSecurityTrustUrl(base64Image)”>

Thanks a lot for this share !
you saved my day !

ljwiie

Oct '18

In ionic v3,just like yours:
this.image = (<any>window).Ionic.WebView.convertFileSrc(imageData);

this works for me :slight_smile:

It works fine! Thanks

What does the extension -lc switch do ?

just save my day, thank you
this.image = (window).Ionic.WebView.convertFileSrc(imageData);

Thanks, nice great !!!

Thanks it works …

work for me too , thanks

It’s a good solution. You truly help save me a lot of time. Thank you.

in ionic 4 use this code working fine on android
/**
*take photo from Camera
**/

public async takeSubPhotoCamera(){
		const options: CameraOptions = {
			quality: 100,
			destinationType: this.camera.DestinationType.DATA_URL,
			encodingType: this.camera.EncodingType.JPEG,
			mediaType: this.camera.MediaType.PICTURE,
			saveToPhotoAlbum: false,
			correctOrientation: true,
		}
	
		await this.camera.getPicture(options).then((imageData: any) => {
			this.myphoto = 'data:image/jpeg;base64,' + imageData;
			this.previewImage(this.myphoto);
		}, (err) => {
		  // Handle error
		});
	}

/**
*take photo from library
**/

 public async takeSubFileLibrary() {
		const options: CameraOptions = {
			quality: 100,
			destinationType: this.camera.DestinationType.DATA_URL,
			encodingType: this.camera.EncodingType.JPEG,
			mediaType: this.camera.MediaType.PICTURE,
			correctOrientation: true,
			sourceType:0,
		}
		this.croppedImage = '';
		await this.camera.getPicture(options).then((imageData : any) => {
			this.myphoto = 'data:image/jpeg;base64,' + imageData;
			this.previewImage(this.myphoto);
		});
	}