Image

Using an image requires the Image module to be loaded.

import * as ImageModule from "tns-core-modules/ui/image";

Binding the image source property to a view-model property.

<Page>
  <StackLayout>
     <!--Bind the image source property to view-model property -->
     <Image src="{{ thumbnailImageUrl }}" />
     <!--Load form image from application -->
     <Image src="~/logo.png" stretch ="none" / > 
     <!--Load form image resource -->
     <Image src="res://logo.png" stretch ="none" / > 
     <!--Load form image URL-->
     <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" /> 
  </StackLayout>
</Page>

Creating an image and setting its source

const image = new ImageModule.Image();
image.src = "res://icon";

Creating an image and setting its src

const image = new ImageModule.Image();
image.src = "https://www.google.com/images/errors/logo_sm_2.png";

Creating an image and setting its src to a file within the application

const image = new ImageModule.Image();
image.src = "~/logo.png";

Creating an image and setting its src to Data URI

const image = new ImageModule.Image();
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";

Setting image stretching

const image = new ImageModule.Image();
// There are 4 modes of stretching none, fill, aspectFill, aspectFit
// The default value is aspectFit.
// Image stretch can be set by using ImageModule.stretch enum.
image.stretch = "aspectFit";

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.