Have you seen all of the free code samples available on our Marketplace?

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.

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 -->
<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


API Reference for Image Class

Native Component

Android iOS
android.widget.ImageView UIImageView