🥳 NativeScript 6.0 is here! Learn all about it at our launch webinar.

NativeScript Angular

Image

The Image widget shows an image in your mobile application. We can load the image from an ImageSource or a URL using the src property. Behind the Image module stands UIImage on iOS and android.widget.ImageView on Android. As working with images is an essential part of each mobile application following the best practices is a must.

import { Image } from "tns-core-modules/ui/image";

Creating Image

Create Image via HTML

The src property can accept local and remote paths. It can also accept paths and ImageSource instances bind via code behind.

<!-- Load image from app/App_Resources/<platform> folders-->
<Image src="res://logo_white_bg" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
<!-- Load image from app/images folder -->

<!-- If using the new Native Angular project structure, the `images` folder should be put under `src`. -->
<!-- In this case, the image will be load from src/images folder. -->
<Image src="~/images/logo.png" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
<!-- Load image from url -->
<Image src="https://docs.nativescript.org/img/cli-getting-started/angular/chapter0/NativeScript_logo.png"
    stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
<!-- Load image from url -->
<Image [src]="myImageSource" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>

Create Image dynamically via TypeScript

public newImage: Image;

onStackLoaded(args) {
    let stack = <StackLayout>args.object;
    this.newImage = new Image();
    this.newImage.src = IMAGE_URL;
    this.newImage.stretch = "none";
    this.newImage.style.margin = "15";
    stack.addChild(this.newImage);
}

Background Image via CSS

Use property background-image to apply image via CSS.

.layoutBackgroundImageURL{
    background-image: url("https://docs.nativescript.org/img/cli-getting-started/angular/chapter0/NativeScript_logo.png");
    background-repeat: no-repeat;
    height: 120;
    margin: 15;
}

.layoutBackgroundImageFromFolder{
    background-image: url("~/images/logo.png");
    background-repeat: no-repeat;
    height: 60;
    margin: 15;
}


.layoutBackgroundImageFromRes{
    background-image: url("res://logo_white_bg");
    background-repeat: no-repeat;
    height: 100;
    margin: 15;
}
<!-- Load backgroundImage from url using CSS-->
<StackLayout class="layoutBackgroundImageURL"></StackLayout>
<!-- Load backgroundImage from app/images folder using CSS-->
<StackLayout class="layoutBackgroundImageFromFolder"></StackLayout>
<!-- Load backgroundImage from App_Resources using CSS -->
<StackLayout class="layoutBackgroundImageFromRes"></StackLayout>

Image with ImageSource from Base64 String

Convert an image to and from Base64 encoded string using toBase64String and fromBase64 methods. Then create an ImageSource instance and bind it to the src property of Image.

// import { ImageSource, fromBase64 } from "image-source";
const IMG_AS_BASE64_STRING = this.myImageSource.toBase64String("png");
this.base64ImageSource = fromBase64(IMG_AS_BASE64_STRING);
<!-- Load Image from Base64 string generated ImageSource -->
<Image [src]="base64ImageSource" width="100" height="100" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>

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.

<Image src="res://logo_white_bg" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>

In the above sample code, we set up the Image stretch property to none. This means that the image will be shown on the screen with its original size.

Improve this document

Demo Source


Icon Fonts

Icon Fonts in Image

Using the font:// prefix, you can load a resource image while setting up an icon code provided by an icon font. By setting up this prefix, a new image will be generated, which will be set as an ImageView resource. While using this functionality, we need to specify the font-size, which will calculate the size of the generated image base on the device's dpi. For further configuration on size of the displayed image, we can config the view's width and height properties.

<GridLayout rows="*" columns="*, *" height="300" verticalAlignment="middle">

    <Image row="0" col="0" src="font://&#xF2b9;" class="font-awesome"></Image>

    <Image row="0" col="1" src="font://&#xF359;" class="font-awesome font-size color"></Image>

</GridLayout>
.font-awesome {
    font-family: "Font Awesome 5 Free", "fa-regular-400";
}

.font-size {
    font-size: 96;
}

Improve this document

Demo Source


API Reference for Image Class

Native Component

Android iOS
android.widget.ImageView UIImageView