Image

The Image widget shows an image in your mobile application.

Note: When working with images following the best practices is a must.

Usage

XML
JavaScript
TypeScript
CSS

<Image src="res://icon" stretch="aspectFill" />

<Image src="~/images/logo.png" stretch="aspectFill" />

<Image src="https://www.nativescript.org/images/default-source/Blogs/ns-logo_share_600x315.png" stretch="aspectFill" />

<Image src="{{ imageUri }}" width="100" height="100" stretch="aspectFill" />

const Observable = require("tns-core-modules/data/observable").Observable;

function onNavigatingTo(args) {
    const view = args.object;

    const vm = new Observable();
    vm.set("imageUri", "~/images/logo.png");
    view.bindingContext = vm;

}
exports.onNavigatingTo = onNavigatingTo;

import { EventData, Observable } from "tns-core-modules/data/observable";
import { View } from "tns-core-modules/ui/core/view";

export function onNavigatingTo(args: EventData) {
    const view = <View>args.object;

    const vm = new Observable();
    vm.set("imageUri", "~/images/logo.png");
    view.bindingContext = vm;

}

Image {
    width: 50;
    height: 50;
}

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.t-36 {
    font-size: 36;
}

Improve this document

Demo Source

Styling

XML
JavaScript
TypeScript
CSS

<StackLayout height="100%"  class="m-15" backgroundColor="lightgray" loaded="containerLoaded">
    <Image row="0" col="0" src="font://&#xF2b9;" class="fas t-36"/>

    <!-- Image with stretch property ("none", "aspectFill" and "aspectFit") -->
    <Image src="res://logo_white_bg" stretch="aspectFill"/>
</StackLayout>

const Image = require("tns-core-modules/ui/image").Image;
function containerLoaded(args) {
    const container = args.object;

    const newImage = new Image();
    const imageString = String.fromCharCode(0xF2b9);
    newImage.src = `font://${imageString}`;
    newImage.className = "font-awesome font-size";
    newImage.width = 49;
    newImage.height = 49;

    container.addChild(newImage);
}
exports.containerLoaded = containerLoaded;

import { EventData } from "tns-core-modules/data/observable";
import { Image } from "tns-core-modules/ui/image";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";

export function containerLoaded(args: EventData) {
    const container = <StackLayout>args.object;

    const newImage = new Image();
    const imageString = String.fromCharCode(0xF2b9);
    newImage.src = "font://" + imageString;
    newImage.className = "font-awesome font-size";
    newImage.width = 49;
    newImage.height = 49;

    container.addChild(newImage);
}

Image {
    width: 100;
    height: 100;
}

.fas {
    font-family: "Font Awesome 5 Free", "fa-regular-400";
    font-weight: 900;
}

.t-36 {
    font-size: 36;
}

Improve this document

Demo Source

Properties

Name	Type	Description
`decodeHeight`	`Length`	[Android only] Gets or sets the desired decode height of the image.
`decodeWidth`	`Lengt`	[Android only] Gets or sets the desired decode width of the image.
`isLoaded`	`boolean`	Gets a value indicating if the image is loaded.
`isLoading`	`boolean`	Gets a value indicating if the image is currently loading.
`loadMode`	*"sync", "async"*	Gets or sets the loading strategy for images on the local file system.
`src`	`string`	Gets or sets the source of the Image. This can be either an URL string or a native image instance.
`stretch`	`Stretch`	Gets or sets the image stretch mode.
`tintColor`	`Color`	A color used to tint template images.

API References

Name	Type
tns-core-modules/ui/image	`Module`
Image	`Class`

Native Component

Android	iOS
android.widget.ImageView	UIImageView

NativeScript Core

Image

Usage

Styling

Properties

API References

Native Component