Image

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

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

Examples

Example: Displaying an image from App_Resources

  • Vue

  • Svelte

  • Plain

  • Angular

  • React

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

Example: Displaying an image relative to the app directory

  • Vue

  • Svelte

  • Plain

  • Angular

  • React

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

Example: Displaying an image from a URL

Setting loadMode to async will prevent freezing the UI on Android when loading photos async (e.g. from online API)

  • Vue

  • Svelte

  • Plain

  • Angular

  • React

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

Example: Displaying a base64-encoded image

  • Vue

  • Svelte

  • Plain

  • Angular

  • React

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

Example: Image with CSS and an icon fonts

  • Vue

  • Svelte

  • Plain

  • Angular

  • React

<image src.decode="font://&#xf004;" class="fas" />

In NativeScript-Vue, .decode is required for parsing properties that have HTML entities in them.

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

Props

Name Type Description

src

String or ImageSource

Gets or sets the source of the image as a URL or an image source. If you use the new font:// icon protocol in {N} 6.2, make sure you add .decode to the name of the property - e.g. src.decode="font://&#xf004;"

imageSource

ImageSource

Gets or sets the image source of the image.

tintColor

Color

(Style property) Sets a color to tint template images.

stretch

ImageStretch

(Style property) Gets or sets the way the image is resized to fill its allocated space. + Valid values: none, aspectFill, aspectFit, or fill. + For more information, see ImageStretch.

loadMode

Gets or sets the loading strategy for the images on the local file system. + Valid values: sync or async. + Default value: async. + For more information, see loadMode.

...Inherited

Inherited

Additional inherited properties are not shown. Refer to the API Reference

Native component

Android iOS

android.widget.ImageView

UIImageView