Search code examples
nativescriptreact-nativeangular2-nativescript

Nativescript angular local file system images not showing

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 enter image description here

Solution

  • as intensepic image is in images folder not in App resources, no need to use res:// There must be problem with image path try this one 

    <Image src="~/images/intensepic.jpg"></Image>

    or 

    <Image src="~/app/images/intensepic.jpg"></Image>