Image

<Image> is a UI component that shows an image from an ImageSource or from a URL.

Displaying an image from App_Resources #

<Image src="res://icon" stretch="aspectFill" />

Displaying an image relative to the app directory #

<Image src="~/logo.png" stretch="aspectFill" />

Displaying an image from a URL #

<Image
  src="https://art.nativescript.org/logo/export/NativeScript_Logo_Blue_White.png"
  stretch="aspectFill"
/>

Displaying a base64-encoded image #

<Image src="data:Image/png;base64,iVBORw..." stretch="aspectFill" />

Rendering a font icon as image #

<Image src="font://&#xf004;" class="fas" />

Props #

src #

<Image src="{{ src }}" />

<Image src="font://&#xf004;" />

<Image src="~/assets/images/cat.jpeg" />

export class HelloWorldModel extends Observable {
  src: string | ImageSource = '~/assets/images/cat.jpeg'
}

Gets or sets the source(ImageSource) of the image.

imageSource #

ImageSource.fromUrl(url)
  .then((imageSource: ImageSource) => {
    image.imageSource = imageSource
  })
  .catch((error) => {
    // handle errror
  })

tintColor #

<Image src="{{ src }}" tintColor="#ff00ffaa"/>

Sets a color to tint template images.

stretch #

<Image src="{{ src }}" class="fas" stretch="aspectFill"/>

Gets or sets the way the image is resized to fill its allocated space. For valid values, see ImageStretch.

loadMode #

<Image src="{{ src }}" loadMode="sync"/>

Gets or sets the loading strategy for the images on the local file system. Valid values:

• sync - blocks the UI if necessary to display immediately. Only recommeded for small icons.
• async (default) - will load in the background, may appear with short delay, good for large images. When loading images from web they are always loaded async no regardless loadMode value.

...Inherited #

For additional inherited properties, refer to the API Reference.

Native component #