NativeScript Angular
In this article
Not finding the help you need?
Ask the community Improve this article

Image

The Image widget shows an image in your mobile application.

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

Usage

<!-- Using a resource image (logo_white_bg.png) from App_Resources/<platform> folders -->
<Image src="res://logo_white_bg" stretch="aspectFill"></Image>

<!-- Using local image from app/images/logo.png -->
<Image src="~/images/logo.png" stretch="aspectFit"></Image>

<!-- 
    Setting loadMode to async will prevent freezing the UI 
    on Android when loading photos async (e.g. frm online API) 
-->
<Image src="~/images/logo.png" loadMode="async" stretch="aspectFit"></Image>

Improve this document

Demo Source

Styling

<StackLayout height="100%"  class="m-15" backgroundColor="lightgray">
    <!-- Image with CSS and an icon fonts -->
    <Image src="font://&#xF2b9;" class="fas t-36"></Image>

    <!-- Image with stretch property ("none", "aspectFill" and "aspectFit") -->
    <Image src="res://logo_white_bg" stretch="aspectFill"></Image>
</StackLayout>

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