images.md

title	description	position	slug	publish	previous_url
Images	How to work with images in a NativeScript application. The examples demonstrate how to load an image via URL, image from a local file system and image from the resource folder. In the description can be found info how to add an image in the resource folders.	60	images	false	/ui-images,/ui/ui-images

Working with Images

In this article, we will look at the different ways to show images in a NativeScript application. Images are added to an application either declaratively (XML) or with code (JS). NativeScript supports images coded as JPG or as PNG.

Note: NativeScript supports images encoded as PNG or JPG files.

{% nativescript %}

<Image src="~/logo.png" />

let image = new imageModule.Image();
image.src = "~/logo.png";
dockLayout.addChild(image);

{% endnativescript %} {% angular %}

<Image src="~/logo.png" ></Image>

let image = new imageModule.Image();
image.src = "~/logo.png";
dockLayout.addChild(image);

{% endangular %}

The prefix of the src value specifies where the image will be loaded form. The possible options are:

• From URL (http:// or https:// prefix)
• From local file system (~/ prefix)
• From resource (res:// prefix)

You can also use the [image-source]({%ns_cookbook image-source%}) module to create an image source and manually set it to the image:

let image = new imageModule.Image();
let imageSource = imageSourceModule.fromResource("logo");
image.imageSource = imageSource;

You can also use the image-source API to save and load images from a base64 encoded string.

Load images from URL

Web images have an http:// or https:// prefix. When such an image is loaded, an asynchronous http request will be sent and the image will be shown if the request is successful.

{% nativescript %}

<Image src="https://www.google.com/images/errors/logo_sm_2.png" />

{% endnativescript %} {% angular %}

<Image src="https://www.google.com/images/errors/logo_sm_2.png" ></Image>

{% endangular %}

You can manually create an [ImageSource instance from URL]({%ns_cookbook image-source#load-image-from-url%}).

Load images from local file system

Using the ~/ prefix, you can load images relative to the App folder inside your project.

{% nativescript %}

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

{% endnativescript %} {% angular %}

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

{% endangular %}

The actual mapping between the ~/ to this app folder is configured in the tsconfig.json file under the compilerOptions property.

"paths": {
  "~/*": [
    "app/*"
  ]

For images to be available in the app they need to be included in the build process. To include the files make sure they are copied during the build. This is done by adding a additional target to the copyTargets in the webpack.config.js.

  const copyTargets = [
    ...
    { from: 'images/**', noErrorOnMissing: false, globOptions: { dot: false, ...copyIgnore } },
  ];

You can manually create an [ImageSource instance from local file]({%ns_cookbook image-source#load-image-from-a-local-file%}).

Currently, loading images from the file system does not respect filename qualifiers as described [here]({% slug architecture %}#supporting-multiple-screens). We have plans to implement that along with density-specific qualifiers support.

Load images from a resource

Using the res:// prefix you can load a resource image. This is the suggested approach, as it uses the native methods for loading the best image for the current device screen density.

{% nativescript %}

<Image src="res://logo" stretch="none" />

{% endnativescript %} {% angular %}

<Image src="res://logo" stretch="none" ></Image>

{% endangular %}

You can manually create an [ImageSource instance from resource]({%ns_cookbook image-source#load-image-using-resource-name%}).

The file extension is not included when referencing resource images.

The actual resource images should be added to the App_Resources folder in your application and should follow the platform guidelines.

Adding Android resources

Android resources should be added to the corresponding drawable-XXX folders inside the App_Resources\Android\src\main\res folder in your app:

The content of this directory will be copied inside the platforms\android\res when the app is prepared by the NativeScript CLI. More information about how to use drawable resources in Android can be found here.

Adding iOS resources

IOS resources should be added inside the App_Resources\ios folder in your app. You can use @1x, @2x and @3x suffixes to target devices with a specific screen scale. Here is a list of devices for each scale factor:

• @1x - iPad 2 and iPad mini (1st Generation)
• @2x - iPhone 4s, iPhone 5, iPhone 6, iPad (retina)
• @3x - iPhone 6 Plus

For more information, see Icon and Image Sizes in the iOS Developer Library.

Once the NativeScript project is prepared (tns prepare ios) all the images will be copied to the platforms\ios\<project-name>\Resources.