Download and binding Local System image

Question

I'm getting my hands back on an app (nativescript+angular) developed a few years ago... I've already updated everything to the latest versions... briefly... upon opening the app connects to a server from which it asks for a json with data (txt and remote img url) with which to populate a master-detail. Over time this data has increased considerably and therefore now I would like to implement a function that at the first start in the background downloads and saves the json and img locally so that from the second start the app uses the local data when opened, updating in the background json and any new images.

now... the code I implemented seems to work (I download the img into the file system and update the json... I have log with the local path, I have log with all the contents of the destination folder). The problem is that when I try to link the images in the template they don't appear.

private async downloadFestivalImages(data: any[]): Promise<any[]> {
    const documentsFolder = knownFolders.documents().path;

    for (const festival of data) {
        if (festival._embedded && festival._embedded['wp:featuredmedia']) {
            const imageUrl = festival._embedded['wp:featuredmedia'][0].source_url;
            const imageName = imageUrl.split('/').pop(); // Nome del file immagine
            const localPath = path.join(documentsFolder, imageName);      
          
            // Scarica e salva l'immagine se non esiste
            if (!File.exists(localPath)) {
                try {
                    const response = await this.http.get(imageUrl, { responseType: 'arraybuffer' }).toPromise();
                    const file = File.fromPath(localPath);
                    const buffer = new Uint8Array(response); // Converte i dati binari in un array di byte
                    file.writeSync(buffer);
                    console.log(`Immagine salvata: ${localPath}`);
                }catch(error) {
                    console.error("Errore nel download dell'immagine:", imageUrl, error);
                }
            }else{
                console.log(`Immagine già salvata: ${localPath}`);
            }
            // Aggiorna il percorso dell'immagine nel JSON
            festival.localImagePath = localPath;
        }

this is the template:

<image [src]="item.localImagePath || item.urlImg" ....

and this the error log:

Missing Image with resourceID: file:////data/user/0/it.Appname.name/files/24FF-intro.jpg

but by listing the contents of the folder the files are found. what am I doing wrong?