Nativescript: Nativescript angular local file system images not showing

[kavalirakesh]

i have created nativescript angular app with nativescript side kick software with navigation drawer template, i want to display image in home page from local file system.

i am using latest angular and nativescript

APP
--> images
--> Home

Local Build and Cloud Build

<Image src="res://icon" ></Image> --> showing image

<Image src="../images/intensepic.jpg" ></Image> --> if i click on "..images/intensepic.jpg" using ctrl+click its going to path of images in project and pick image but image is not showing in app.

<Image src="~/images/intensepic.jpg" ></Image> --> if i click on "~/images/intensepic.jpg" using ctrl+click its failed find images in project and not able to pick image and image is not showing in app.

<Image src="/app/src/images/intensepic.jpg" ></Image> --> if i click on "/app/src/images/intensepic.jpg" using ctrl+click its going to path of images and pick image but image is not showing in app.

Nativescript Playgrond

<Image src="res://icon" ></Image> --> showing image

<Image src="../images/intensepic.jpg" ></Image> --> image is not showing in app.

<Image src="~/images/intensepic.jpg" ></Image> --> image is showing in app.

Which platform(s) does your issue occur on?
Both

[NickIliev]

@kavalirakesh when working with local files use the tilde alias (~). The tolde is programmatically assigned as an alias to your project's app folder, and it is expected that ctrl+click in your IDe won't work (as the IDE does not know what to do with the tilde alias)

However, the images should show as expected in your application. Here is a demo project made with the CLI and also the same scenario in a Playground demo

Both scenarios are demonstrating the tilde usage as follows:

<Image src="~/images/logo.png"></Image>

Where the logo.png file is located in /app/images/logo/png

[kavalirakesh]

@kavalirakesh when working with local files use the tilde alias (~). The tolde is programmatically assigned as an alias to your project's app folder, and it is expected that ctrl+click in your IDe won't work (as the IDE does not know what to do with the tilde alias)

However, the images should show as expected in your application. Here is a demo project made with the CLI and also the same scenario in a Playground demo

Both scenarios are demonstrating the tilde usage as follows:

<Image src="~/images/logo.png"></Image>

Where the logo.png file is located in /app/images/logo/png

Hi @NickIliev
thanks for your quick reply, i have created new project based on your sample.

still i am not able to see the image in android app.

I am able to see image in nativescript playground, but not in local build.

below i am attaching image about my project.

[NickIliev]

@kavalirakesh if you have used the Sidekick drawer template then the default application structure is as your image shows <your-project>/src/app/images/logo.png so the ~ alias is pointing your src folder

To see what the tilde is actually pointing at pen the projects tscongfig.json file.

So your images are in ~/app/images/logo.png

<Image src="~/app/images/logo.png"></Image>

The NativeScript templates now have a nsconfig.json file like this one. When the template is created the tsconfig.json will be created with the values taken from nscofnig. So the main folder in this case will be src.

[kavalirakesh]

@kavalirakesh if you have used the Sidekick drawer template then the default application structure is as your image shows <your-project>/src/app/images/logo.png so the ~ alias is pointing your src folder

To see what the tilde is actually pointing at pen the projects tscongfig.json file.

So your images are in ~/app/images/logo.png

<Image src="~/app/images/logo.png"></Image>

The NativeScript templates now have a nsconfig.json file like this one. When the template is created the tsconfig.json will be created with the values taken from nscofnig. So the main folder in this case will be src.

@NickIliev you are star, its working.
thank you very much.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.