You are reading docs for v1.3.1, click here for the latest version.
- introduction
- getting-started
- routing
- utilities
- elements:layouts
- elements:action-bar
- elements:components
- elements:dialogs
Image
This is an overview of the most common usage of Image. For more information about the available properties, methods, or events, head over to the complete API documentation for Image.
<Image> is a UI component that shows an image from an ImageSource or from a URL.
Displaying an image relative to the app directory
<Image src="~/logo.png" stretch="none" />Displaying an image from a URL
<Image src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.png" stretch="none" />Displaying an image from App_Resources
<Image src="res://icon" stretch="none" />Displaying a base64-encoded image
<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 |
Contributors
