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

API References

Native Component