Image

The Image widget shows an image. You can load the image from an ImageSource or from a URL.

API Reference for Image Class

Native Component

Android iOS
android.widget.ImageView UIImageView

Creating Image

Create image via HTML

<!-- Load image from App_Resources -->
<Label text="Image loaded from resources" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<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 -->
<Label text="Image loaded from custom folder" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<Image src="~/images/logo.png" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
<!-- Load image from url -->
<Label text="Image loaded from URL" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<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>

Create image via TypeScript

import { Component } from "@angular/core";
import { Image } from "ui/image";
import { StackLayout } from "ui/layouts/stack-layout";
import { Label } from "ui/label";

const URL = "https://docs.nativescript.org/img/cli-getting-started/angular/chapter0/NativeScript_logo.png";

@Component({
    moduleId: module.id,
    styleUrls: ["./creating-image.component.css"],
    templateUrl: "./creating-image.component.html"
})
export class CreatingImageExampleComponent {

    public newImage: Image;
    public newLabel: Label;

    onStackLoaded(args) {
        let stackView = <StackLayout>args.object;

        this.newImage = new Image();
        this.newImage.src = URL;
        this.newImage.stretch = "none";
        this.newImage.style.margin = "15";

        this.newLabel = new Label();
        this.newLabel.text = "Image loaded from code behind";
        this.newLabel.style.margin = "15";

        stackView.addChild(this.newLabel);
        stackView.addChild(this.newImage);
    }
}

Load Background Image via CSS

<!-- Load backgroundImage from url using CSS-->
<Label text="Image loaded from URL using CSS" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<StackLayout id="layoutBackgroundImageURL"></StackLayout>
<!-- Load backgroundImage from app/images folder using CSS-->
<Label text="Image loaded from custom folder using CSS" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<StackLayout id="layoutBackgroundImageFromFolder"></StackLayout>
<!-- Load backgroundImage from App_Resources using CSS -->
<Label text="Image loaded from resources using CSS" backgroundRepeat="no-repeat"
    textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
<StackLayout id="layoutBackgroundImageFromRes"></StackLayout>
#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;
}

Improve this document

Demo Source


Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.