Error in downloadBitmap - java.io.IOException: Unable to connect to: file://data/data/

[AAlex-11]

I define iconRef in Angular Nativescript code as:

<Image #icon />
@ViewChild("icon", { static: false }) iconRef: ElementRef;

and try dynamically changing image as

this.iconRef.nativeElement.src=`file:/${this.getfullIconPath(this.iconPath)}`

file .png is present, I'm sure that file present and path is correct. I can see file on Android studio

However I receive error

 Error in downloadBitmap - java.io.IOException: Unable to connect to: file://data/data/...
 Missing Image with resourceID: file://data/data/...

What going wrong?

[rigor789]

Where are you placing these icons?

Have you tried putting them in the src/assets/ folder and using ~/assets/icons/${name}.png as the path?

[AAlex-11]

@rigor789 , thanks for answer, this images created dynamically. Of course, static images I placed to src/assets/
Dynamically created image I placed by the same rules

 getfullIconPath(iconName:string){
    const appRootFolder = knownFolders.currentApp();
    const iconPath = path.join(appRootFolder.path, "icons")
    const iconFolder: Folder = Folder.fromPath(iconPath);
    return path.join(iconFolder.path, iconName);
 }

icons (images) created successfully, I can see they in the same place, can open it with Android studio and check what exactly I created.
But, of course, than I want to upload my images to Image control, but failed. Why? What going wrong?

[AAlex-11]

try to use

    this.iconRef.nativeElement.src=`~/icons/1.png`

and receive error, however in reality image present, can opened and checked by Android Studio

[rigor789]

Not quite sure, I would try generating them in assets/gen/icons for example:

And then reference them as ~/assets/gen/icons/${name}.png or whatever.

Thinking about it, maybe you don't need the file:/ prefix just an absolute path and that might also work:

this.iconRef.nativeElement.src=this.getfullIconPath(this.iconPath)}`

[AAlex-11]

If I use static predefinition preloading image from source code ~/assets all working fine and icon showed correctly

   this.iconRef.nativeElement.src="~/assets/save1.png"

if I use dynamically created icon

   this.iconRef.nativeElement.src=this.iconPath

it not working at all, despite icon is present, file is correct and can be opened by Android Studio

this is my code in debugger, I simple replaced preloading image from source code to my dynamically created image:

And application crashed. I try to add point to refresh and one more than

 .then((x) => (this.iconRef.nativeElement.src = `${this.iconPath}${"?ts=" + new Date().getTime()}`))

but nothing changing

[rigor789]

The code screenshot there looks quite odd with that new Promise and resolve this way. What's this.fileService.writeIcon doing?

[AAlex-11]

write image to ~/assets/icon
separate task (Promise) no matter, I can delete it, nothing changing after that, Image can not reading and uploading to Image control

[rigor789]

You are likely incorrectly awaiting the promises (so it does matter!) and trying to display an image before it is written to the filesystem...

Here's a working example: https://stackblitz.com/edit/nativescript-stackblitz-templates-dbdzom?file=src%2Fapp%2Fitem%2Fitems.component.html,src%2Fapp%2Fitem%2Fitems.component.ts&title=NativeScript%20Starter%20Angular

screen-20240505-124425.mp4

[AAlex-11]

thank you, maybe you are right