Nativescript-angular: JS: Error in reading bitmap - java.io.FileNotFoundException: /data/data/org.nativescript.nxtra/files/app/img/1.png (No such file or directory)

[aks84]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI:
• Cross-platform modules:
• Android Runtime:
• NativeScript-Angular:
• Angular:

Description
It does not find the images under /img folder

<ActionBar title="Details"></ActionBar>
<FlexboxLayout flexDirection="column">
<FlexboxLayout class="m-15">
<Label class="h2" [text]="item.id + '. '"></Label>
<Label class="h2" [text]="item.name"></Label>
</FlexboxLayout>
<Label class="h4 m-15" [text]="item.role"></Label>
<Image src="~/img/{{item.id}}.png"></Image>
</FlexboxLayout>

I have /img folder under /app

And a few images in /img folder

• 1.png
• 2.png
• 3.png

[lmarcelino007ph]

@aks84
Please check the webpack.config.js and look for the line where it says const copyTargets.
It is where you can specify the assets you want to include in the build.

By default, it's assets/**
So you can put your img asset inside.

e.g app/assets/img/1.png

[razorsyntax]

Same issue here.

I added 'images' to itemsToClean per @lmarcelino007ph suggestion and then added the following to see if it would use the image folder:

{ from: 'images/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },

HTML is set like this:
<Image src="~/images/image1.png"></Image>

also tried the variant to no avail:
<Image src="~/app/images/image1.png"></Image>

and this, after moving the folder structure around:
<Image src="~/assets/images/image1.png"></Image>

On

• Nativescript 7.0.10
• Angular 10.1.0

[aks84]

@lmarcelino007ph

I created /assets/images under /app and put a few images in /images folder

<Image src="{{item.img}}" stretch="aspectFill"></Image>

But I am still getting the same error.

[razorsyntax]

Further testing:

I added folder tests to see if it'll see the structure:

const path = '~/assets/images/image1.png';
const documents = knownFolders.documents();
const folder = documents.getFolder(path);
console.log(folder);

This is the output:

CONSOLE LOG: {
"_path": "/Users/{obfuscatedusername}/Library/Developer/CoreSimulator/Devices/{long string of stuff}/data/Containers/Data/Application/{long string of stuff}/Documents/~/assets/images/image1.png",
"_name": "image1.png"
}

I'm not really sure if this is what I should be seeing... but it appears that it's outputting the correct name as my image.

Mind you this is for iOS... but it's also not right in Android as well.

[razorsyntax]

This fixed it for me.

There's no documentation that specifies this unfortunately.

I moved the assets, fonts, and my images folder to the src directory.

old folder structure:

|- src
  - assets
  - images
  - fonts

new folder structure:

|- src
  |- app
  - assets
  - images
  - fonts

Hope this helps, @aks84

[eevan7a9]

I'm having the same Issues here. I cant seem to get the path to local images.
is there any update on this?

(edit) I have tried @razorsyntax solution. and it works

[Ksan8]

UPDATE: a version of @razorsyntax's solution did actually work (moving the image file to an assets/ folder within src/); I had simply added width/height styling that used rems. Commenting that out allowed the image to show properly. Perhaps I need to set a base font-size. On further exploration, it appears that rem can be used, but is only equal to ~2px. Curious.

---

I'm having the same issue, but @razorsyntax's solution did not work (moving the images/ folder into src/. As is visible in the terminal, it checks for the image file in the wrong place (still within .../app/images/).

If I move the images/ folder back within app/, the path is now correct, but it still doesn't find the image.

I also tried moving the image file to an assets/ folder within src/; there are no compilation errors this way, but the expected image still does not appear within the simulator.

Package versions:

Any help would be greatly appreciated.

[gitalvininfo]

This fixed it for me.

There's no documentation that specifies this unfortunately.

I moved the assets, fonts, and my images folder to the src directory.

old folder structure:

|- src
  - assets
  - images
  - fonts

new folder structure:

|- src
  |- app
  - assets
  - images
  - fonts

Hope this helps, @aks84

Thanks for this solution, I've been smashing my laptop for over a day now, finding out what is wrong with my structure, already checked my tsconfig which points to src/ and finding similar questions like mine but this is the only solution worked for me.