For anyone who is facing issues with FILE_URL photos with camera and file plugin

Ok, i’ve been running through this issue for several days when i started building apps with ionic, i was really suffering so i thought that it might help someone,
First some apps doesn’t have meta tag for CSP (Content Security Policy)

Please follow below sample

Copy this line into your index.html

    <meta http-equiv="Content-Security-Policy" content="default-src *; 
    style-src 'self' 'unsafe-inline'; 
    script-src 'self' 'unsafe-inline' 'unsafe-eval';
    img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
    script-src 'self' https://maps.googleapis.com;" />

Then, write this function inside your TS file:

    getImageFromCamera() {
    const options: CameraOptions = {
    quality: 20,
    saveToPhotoAlbum: true,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.CAMERA,
    encodingType: this.camera.EncodingType.JPEG,
    allowEdit: false
    };
    this.camera.getPicture(options).then((imageData) => {
    this.imageURI = imageData;
    this.imageName = imageData.substr(imageData.lastIndexOf('/') + 1);
    // Create a folder in memory location
    this.file.checkDir(this.file.externalRootDirectory, 'Demo')
        .then(() => {
            this.fileCreated = true;
        }, (err) => {
            console.log("checkDir: Error");
            this.presentToast("checkDir Failed");
        });
    if (this.fileCreated) {
        this.presentToast("Directory Already exist");
    }
    else {
        this.file.createDir(this.file.externalRootDirectory, "Demo", true)
            .then((res) => {
                this.presentToast("Directory Created");
            }, (err) => {
                console.log("Directory Creation Error:");
            });
    }

    //FILE MOVE CODE
    let tempPath = this.imageURI.substr(0, this.imageURI.lastIndexOf('/') + 1);
    let androidPath = this.file.externalRootDirectory + '/Bexel/';
    this.imageString = androidPath + this.imageName;

    this.file.moveFile(tempPath, this.imageName, androidPath, this.imageName)
        .then((res) => {
            this.presentToast("Image Saved Successfully");
            this.readImage(this.imageString);

        }, (err) => {
            console.log("Image Copy Failed");
            this.presentToast("Image Copy Failed");
        });
    //Complete File Move Code

    this.toDataURL(this.imageURI, function (dataUrl) {
        console.log('RESULT:' + dataUrl);
    });
  }, (err) => {
    console.log(JSON.stringify(err));
    this.presentToast(JSON.stringify(err));
  });
}
presentToast(msg) {
let toast = this.toastCtrl.create({
    message: msg,
    duration: 2000
});
toast.present();
}
toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
    let reader = new FileReader();
    reader.onloadend = function () {
        callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
readImage(filePath) {
let tempPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let imageName = filePath.substr(filePath.lastIndexOf('/') + 1);

this.file.readAsDataURL(tempPath, imageName)
    .then((res) => {
        this.presentToast("Image Get Done");
        this.imageUrl = res;
    }, (err) => {
        this.presentToast("Image Get Error");
    });
}

Then here you go, in HTML:

<img [src]="imageUrl">

And you can modify the function to remove unnecessary console.log, i was just testing.

Note that what this script does is:
1- Taking the photo.
2- Moving the photo to a new directory with the name “Demo” or any name you would like, after renaming the photo name or you can leave it with the same name, your call.
3- Converting the photo to base64 DATA_URI.
4- Store the converted image into a variable and show it into the screen.

For any questions or if you need any assistance, i’m here to help.