Image

The purpose of this article is to show the basic functionality of the Image view. The snippets demonstrates some scenarios and the usage of the ImageView specifics properties

Using an image in the code behind requires the Image module to be loaded.

import * as ImageModule from "tns-core-modules/ui/image";

Binding image source property

Binding image source property to a view-model property.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
     <Image src="{{ thumbnailImageUrl }}" />
  </StackLayout>
</Page>
import { Page } from 'ui/page';
import { fromObject, EventData } from "data/observable"
export function pageLoaded(args: EventData) {
    let page = <Page>args.object;

    page.bindingContext = fromObject({ thumbnailImageUrl:"res://icon" });
}

Loading an image from app resources

<Page>
  <StackLayout>
     <Image src="res://logo" stretch ="none" / >
  </StackLayout>
</Page>
const image = new ImageModule.Image();
image.src = "res://icon";

The example demonstrates how we could load an image, which is available in the App_Resources. More about adding an image in App_Resources folder could be found here.

Loading an image from URL

<Page>
  <StackLayout>
     <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" />  
  </StackLayout>
</Page>
const image = new ImageModule.Image();
image.src = "https://www.google.com/images/errors/logo_sm_2.png";

The sample above, demonstrates, how to load an image source while providing URL string.

Loading an image from file within the application

<Page>
  <StackLayout>
     <Image src="~/logo.png" stretch ="none" / >
  </StackLayout>
</Page>
const image = new ImageModule.Image();
image.src = "~/logo.png";

The Image source could be load also from a local file. The path to the image should start with a tilde(~) as it is shown in the example above. Using ~/ prefix, we can load images relative to the project app folder

Loading an image from Data URI

const image = new ImageModule.Image();
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";

In the sample code is shown, how to load an image source data, while using data URI.

Setting image stretching

The stretch functionality allows us to describe how content is resized to fill its allocated space. The available options for this property are as follow:

  • none - the image preserves its original size
  • fill - the image is resized to fill the destination dimensions. In this case, the aspect ratio is not preserved.
  • aspectFit - the image is resized to fit the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the image, the image will be clipped to fit in the destination.
  • aspectFill - the image is resized to fill in the destination dimensions while it preserves its native aspect ratio.

The default value for this property is aspectFit.

Setting up the stretch property could be done via the XML code or while using code behind.

via XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
    <StackLayout class="p-20">
        <Image loaded="imgLoaded" src="~/images/logo.png" stretch="none"/>
    </StackLayout>
</Page>

This code snippet demonstrates the first scenario, when we setup the stretch in the XML. We setup it to none, which means that the image will be shown on the screen with its original size.

via code-behind

const image = new ImageModule.Image();
image.stretch = "aspectFit";

The second example shows, how we could set up the property via code behind. In this scenario, we get an instance of the image and set up the appropriate string value. The Image stretch could also be set by using Stretch enum. For example:

import * as Enums from "tns-core-modules/ui/enums"

const image = new ImageModule.Image();
image.stretch=Enums.Stretch.none;

API Reference for Image Class

Native Component

Android iOS
android.widget.ImageView UIImageView

See also

Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.