how to insert images in nativescript from local file (angular)

Question

Currently trying to display an image from my local on my ios app that i've developed using nativescript and not having any luck.

Template:

<GridLayout class="page page-content">
    <StackLayout>
        <Image src="~/img/icon.jpg" stretch="none"></Image>
    </StackLayout>
</GridLayout>

File structure:

Not really sure what im doing wrong, i even tried to play around with the different path of the image.

"~/app/img/icon.jpg" and even put the direct path on there with no luck.

EDIT:

OK so i tried uploading a smaller image and that seemed to go in fine. Any way to optimize an image to work on nativescript?

If you are using webpack (--bundle), did you try res://icon? — Manoj
– Manoj, Commented Mar 27, 2019 at 21:11
hmm i tried using res:// and still no luck. I'm just using the default webpack configuration from the nativescript cli build — jeremy
– jeremy, Commented Mar 27, 2019 at 21:15
As an additional feature for Android, NativeScript supports decodeWidth and decodeHeight. These properties will downsample your image so that it will take less memory. The goal is to avoid as much as possible out of memory exceptions caused by images being loaded into memory and at the same time display crispy images. — Narendra
– Narendra, Commented Apr 3, 2019 at 3:31

Harshvardhan Singh Baghel · Accepted Answer · 2020-02-04 09:34:00Z

3

Create images folder inside your App folder and place path like this:-

~/app/images/logo.png

answered Feb 4, 2020 at 9:34

1,13312 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

This answer works for me! @jeremy: This answer should be accepted.