Display local images in data directory

I’m trying to display an image that lives in file.dataDirectory.

I got this to work nicely on Android by using the nativeURL property of the file Entry. This returns a URL beginning with file:// and everything works great. However on iOS I can’t get the image to show.

I’ve found a lot of posts that talk about adding things to config.xml like:

<access origin="*" />


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

But nothing seems to work. I’ve tried using a URL that starts with cdvfile:// and lots of other things, but I still have no joy.

Is there a canonical way of displaying images that live locally on the device?

If it makes any difference I’m trying to use the URL with the background-image.


1 Like

I solved that by using the method readAsDataURL from cordova plugin file. Code example:

    this.file.readAsDataURL(cordova.file.dataDirectory, imageName).then(dataurl => {
      this.dataurl = dataurl;
  (error) =>{

In this example imageName is the same value that you pass on copyFile. Use this.dataurl to show the image.


thanks man you saved my day !