Display images with cdvfile://* in img tag cordova

Question

I'm using the cordova-plugin-camera to take a picture with these options:

quality: 100,
destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: false,
saveToPhotoAlbum: true,
correctOrientation: true

This is working and I get an URL / Path like this:

assets-library://asset/asset.JPG?id=FBA79210-5E65-4C9B-BF19-9F1169B777C0&ext=JPG

Then, I want to convert this path to a cdvfile:// to display the image in an tag.

window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
        const url = fileEntry.toInternalURL()
})

This is also working and I get:

cdvfile://localhost/assets-library/asset/asset.JPG?id=FBA79210-5E65-4C9B-BF19-9F1169B777C0&ext=JPG

But the image is not rendered. I tried to add <access origin="cdvfile:*" /> in my config.xml but that's not working either. How can i get a valid path / url to display the image?

Best wishes, Joeri

Answer 1

I had the same problem and managed to solve it with a different approach. After getting the cdvfile url I used Photo Library plugin to get the blob file through the getPhoto method passing the id present in the cdvfile url and with this in hand I got the img source working with the base64data as below:

photoLibrary.getPhoto('FBA79210-5E65-4C9B-BF19-9F1169B777C0').then((blob)=>{

   var reader = new FileReader();
   reader.readAsDataURL(blob); 
   reader.onloadend = function() {
      var base64data = reader.result;                
      img.src = base64data;
   }
});

UPDATE You can also use getThumbnail function to improve your page loading depending on the quality, size and quantity of photos you app is supposed to handle.