Can not display image FILE_URI from Camera Plugin

Ionic Native
1

Hi,

I am using Camera Plugin, my platform is Android. Everything works fine with base64-encode string but when I use destinationType is FILE URI the image won’t display.

I have already tried with these ways but it still not work:

  • Add <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'>

  • Import DomSanitizer

  • Use normalizeURL

  • Not using livereload

  • Add <allow-navigation href="file://*/*" >

This is the result when I take a picture from camera, I run ionic cordova run android and debug it through USB device on Chrome:

Capture
Capture.PNG820×27 2.29 KB

My .ts file:

takePicture() {
		const options : CameraOptions = {
			quality: 100,
			destinationType: this.camera.DestinationType.FILE_URI,
			encodingType: this.camera.EncodingType.JPEG,
			mediaType: this.camera.MediaType.PICTURE,
			allowEdit: true,
			correctOrientation: true,
			saveToPhotoAlbum: true
		}
		this.camera.getPicture(options) .then((imageData) => {
			this.imageURI = imageData;
			this.images.push(this.imageURI);
			console.log(this.images);
		}, (err) => {
			console.log(err);
		});
	}

My .html file:

<ion-grid>
    <ion-row>
      <ion-col col-6 *ngFor="let photo of photos; let id = index">
        <ion-card class="block">
          <img [src]="photo" *ngIf="photo" />
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

Does anyone have a different solution? Please help me.

Thank you so much.

2

try with

<img src="{{ myphoto }}">

3

Hi @uddyvky

Thanks for your reply, but it still not working :sob:

4

try using the file plugin.

5

Finally I find the solution, it comes from this post Unable to display image using FILE_URI

The answer of jalo helped me

6

i am also facing same issue…can you provide complete step or code.because i followed jalo but not achieved.

7 
this.camera.getPicture(options).then((imageData) => {
this.myImg = (<any>window).Ionic.WebView.convertFileSrc(imageData);
});

this one solved my problem

2 Likes
8

it’s really works for me, thanks !