Using image files

[Ian]

Hi,
Is there any documentation or advice for how to use local image files in a NativeScript application?

I see that a folder called App_Resources is automatically created with each application that includes the image files for the application's icon and splash screen. But if I want to use additional images as part of the UI on pages, can these be included in a separate folder (eg. app/images) or must they be in the App_Resources folder?

If I then need to reference these images in, say, a ListView template, do I include an image-source variable in the page model and then bind it to an <Image> attribute in the page's XML file? A code example to illustrate this would be really helpful.

Finally, I assume I might need to include different versions of each image to cater for the different resolution screens on iOS and Android phones. Are there any NativeScript functions to help determine which image would be best to use on a specific handset?

Regards, Ian

[Vlad]

Hi Ian,

You can load any image file in your code like this:

var myImageSource = imageSource.fromFile(fs.path.join(__dirname, "your_image.png"));

and later use this ImageSource for some UI Image. For example with binding:
...
<Image source="{{ myProperty }}" />
...

We use this technique for all images in our cuteness.io sample app.

Regards,
Vlad
Telerik

 

 

[Ian]

Hi Vlad,
Thanks for the quick reply. I'll try using your code suggestion.

I did try looking for the Cuteness app but the URL I had bookmarked (https://github.com/telerik/nativescript-sample-cuteness/tree/master/nativescript-sample-cuteness) no longer seems to work? Has it moved?

Do you have any recommendations for using different image files for different handset screen resolutions?

Thanks, Ian

[Erjan Gavalji]

Hi Ian,

We're experiencing a hiccup with the current version of the modules, hence the cuteness application is unavailable right now.

We are working on having it fixed as soon as possible (the BETA release, expected in two weeks the latest).

Please, bear with us some more.

As per the different resolution image recommendations - supporting different dpi images is one of the major functionalities a NativeScript project (and, respectively, the tooling) must have. Unfortunately, we still haven't had the chance to start working on it.

Kind regards,
Erjan Gavalji
Telerik