Unable to show images downloaded into File directory


We have been working in an app for iOS and Windows which needs to download an important number of images, store them in the internal storage and then show them in the web.
With iOS this has worked just fine, but with Windows we have been unable to make it work. It seems to be some problem with the images path, we show the paths (via Toasts) and it looks fine (ms-appdata:///local/images/image-name.png) but it doesn’t render in the view (the webview shows the X of unable to load source).

Note: we are using [style.background-image]="‘url(’ + img_url + ‘)’" to print the images in the web.

We have been quite time trying to do workarounds but with no success for now :frowning:

Thank you very much.

I have no idea of Ionic for Windows, so this is a wild guess:
Could you try navigating to the file instead of including it? Just create a link that goes to the file and click it to see if the file is actually there and accessible.

Hi Sujan12, thanks for your answer.
We test this with two modes, first setting the src of the images with the full url, and it worked (this should mean that the file is actually there and it is accessible). The second, downloading the images and then taking its local direction (ms-appdata:///local/images/image-name.png) to the src of the images of the web. This works with iOS and in desktop (so the file is accesible) but not with Windows app :disappointed:

Yes, so you next steps should verify that the file was actually downloaded and cached on Windows. As the images don’t show this could mean they didn’t. Proofing would be to call the file directly and see if it loads. If it doesn’t, what I expect after yur error description, you then have to find out what is broken: The path you are using? The downloading and local saving?

Hi Sujan12,
I’ve been doing some tests and I’ve been able to verify that the image is downloaded correctly in the device:

  • download the image with: http.get(image_url, options).subscribe( (response) => { File.writeFile(directory, image_name, response.json())
  • save the local path of the image downloaded: this.image_path= cordova.file.dataDirectory + image_name;
  • load the image with: FileOpener.open(this.image_path, “image/jpeg”).
    And the system opens the image with the windows photo viewer app.

But, until now, we haven’t done any sustancial progress “printing” these images in the webview (although we think it must be something related to windows-security stuff).

Thanks for your help.

Thanks for the followup, now we know that writing the file actually works - and it’s just the display part.

I would google for “cordova windows file access”. This turns up some StackOverflow questions that might help:

Maybe you have to write to a specific folder that you can access later? What plugins are you using to writing the file?