NativeScript Core

Image

The Image widget shows an image in your mobile application.

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

Usage

<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

<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