Can not display image FILE_URI from Camera Plugin


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:

My .ts file:

takePicture() {
		const options : CameraOptions = {
			quality: 100,
			allowEdit: true,
			correctOrientation: true,
			saveToPhotoAlbum: true
		} .then((imageData) => {
			this.imageURI = imageData;
		}, (err) => {

My .html file:

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

Does anyone have a different solution? Please help me.

Thank you so much.

try with

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

Hi @uddyvky

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

try using the file plugin.

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

The answer of jalo helped me

i am also facing same issue…can you provide complete step or code.because i followed jalo but not achieved. => {
this.myImg = (<any>window).Ionic.WebView.convertFileSrc(imageData);

this one solved my problem


it’s really works for me, thanks !