Problem with URLs to images on Windows 10 APP


I’ve a problem showing images, that I download from a server, in the APP when I build the Windows 10 version. On Android it works ok.

I download the images inside the folder “cordova.file.dataDirectory” that is “ms-appdata:///local”.

I’ve been trying with URLs like:

<img src="ms-appdata:///local/image.png">

And also the physical folder:

<img src="file:///C:/Users/SANJOSE/AppData/Local/Packages/es.novadiet.novadietcatalogo_h35559jr9hy9m/LocalState/image.png">

And none of them works for me. The image doesn’t show. It shows the typical mark when a browser can’d find an image.

Can someone tell me what I’m doing wrong?

Typically you will store static images under the /src/assets folder structure. Then you can load them using src=“assets/myimage.jpg”, unless its a dynamic image?

They are dynamic images. They can change so I must “sync” them if they have changed.

Did you find solution? I have the same problem.

Yes. I did a function to retrieve the images using File from ionic-native, and use it instead the link to the actual image. Something like:

 import { File } from "ionic-native";

 getProductImg(id: string): Promise<string> {
        let nombreFich = "FOTO" + id + "M.jpg";

        return new Promise((resolve, reject) => {
            File.checkFile(this.rutaFicheros, nombreFich).then(() => {
                File.readAsDataURL(this.rutaFicheros, nombreFich).then((dataURL) => {
            }, (error) => {
                console.log("Error loading image!");

And in the template:

<img src="getProductImg(">

By the way “this.rutaFicheros” is the path where I’ve stored the images into the device. In Windows 10 platform I use “cordova.file.dataDirectory” and in Android “cordova.file.externalDataDirectory”.

1 Like