Display local images in data directory

Ionic Framework ionic-v3
1

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="*" />

and

<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.

Thanks!

1 Like
2

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

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

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

2 Likes
3

thanks man you saved my day !