Edit

Image

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

See also:

• Official top-level documentation
• Detailed API specification

---

Displaying an image relative to the app directory

import * as React from "react";

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

Displaying an image from a URL

import * as React from "react";

<image src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.png" stretch="none" />

Displaying an image from App_Resources

import * as React from "react";

<image src="res://icon" stretch="none" />

Displaying a base64-encoded image

import * as React from "react";

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

Props

Name	Type	Description
src	string or ImageSource	Gets or sets the source of the image as a URL or an image source.
imageSource	ImageSource	Gets or sets the image source of the image.
tintColor	Color	(Style property) Sets a color to tint template images.
stretch	Stretch	(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 Stretch.
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.

Native component

Android	iOS
android.widget.ImageView	UIImageView