Using image files

4 posts, 0 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 29 Jan 2015 Link to this post

    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
  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 29 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 29 Jan 2015 in reply to Vlad Link to this post

    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
  4. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 02 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top