NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
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

NameTypeDescription
srcString or ImageSourceGets or sets the source of the image as a URL or an image source.
imageSourceImageSourceGets or sets the image source of the image.
tintColorColor(Style property) Sets a color to tint template images.
stretchStretch(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.
loadModeGets 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

AndroidiOS
android.widget.ImageViewUIImageView
Contributors