<commit_before>---
nav-title: Working with Images in NativeScript
title: "UI: Images"
description: How to work with images in NativeScritp application.
position: 17
---

# Working with Images
In this article we will look in the different ways to show images in a NativeScript application. 
Images are added to application either declaratively(XML) or with code(JS):

```XML
<Image src="~/logo.png" / > 
```
```JavaScript
var image = new imageModule.Image();
image.src = "~/logo.png";
dockLayout.addChild(image);
```

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

* [From URL (`http://` or `https://` prefix)](#load-images-from-url)
* [From local file system (`~/` prefix)](#load-images-from-local-file-system)
* [From resource (`res://` prefix)](#load-images-from-resource)

You can also use the [image-source](./ApiReference/image-source/HOW-TO.html) module to create an image source an manually set it to the image:
```JavaScript
var image = new imageModule.Image();
var imageSource = imageSourceModule.fromResource("logo");
image.imageSource = imageSource;
```

You can also use the [image-source API](./ApiReference/image-source/ImageSource.html) to save and load images form base64 encoded string.

## Load Images from URL
Web images have `http://` or `https://` prefix. When such image is loaded, an asynchronous http request will be sent and the image will be shown if the request is successful.
```XML
<Image src="https://www.google.com/images/errors/logo_sm_2.png" / > 
```

You can manually create an [ImageSource instance from URL](./ApiReference/image-source/HOW-TO.html#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.

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

You can manually create an [ImageSource instance from local file](./ApiReference/image-source/HOW-TO.html#load-image-from-a-local-file)

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

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

You can manually create an [ImageSource instance from resource](./ApiReference/image-source/HOW-TO.html#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 you 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` folder in your app: 

![android resources](img/resources/android-resources.png "android resources")

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 drawable resources in android can be found [here](http://developer.android.com/guide/practices/screens_support.html#DesigningResources).

### 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 that for each scale factor:

* **@1x** - iPad 2 and iPad mini (1st Generation)<commit_msg>Note about device specific files when loading images from FS<commit_after>---
nav-title: Working with Images in NativeScript
title: "UI: Images"
description: How to work with images in NativeScritp application.
position: 17
---

# Working with Images
In this article we will look in the different ways to show images in a NativeScript application. 
Images are added to application either declaratively(XML) or with code(JS):

```XML
<Image src="~/logo.png" / > 
```
```JavaScript
var image = new imageModule.Image();
image.src = "~/logo.png";
dockLayout.addChild(image);
```

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

* [From URL (`http://` or `https://` prefix)](#load-images-from-url)
* [From local file system (`~/` prefix)](#load-images-from-local-file-system)
* [From resource (`res://` prefix)](#load-images-from-resource)

You can also use the [image-source](./ApiReference/image-source/HOW-TO.html) module to create an image source an manually set it to the image:
```JavaScript
var image = new imageModule.Image();
var imageSource = imageSourceModule.fromResource("logo");
image.imageSource = imageSource;
```

You can also use the [image-source API](./ApiReference/image-source/ImageSource.html) to save and load images form base64 encoded string.

## Load Images from URL
Web images have `http://` or `https://` prefix. When such image is loaded, an asynchronous http request will be sent and the image will be shown if the request is successful.
```XML
<Image src="https://www.google.com/images/errors/logo_sm_2.png" / > 
```

You can manually create an [ImageSource instance from URL](./ApiReference/image-source/HOW-TO.html#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.

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

You can manually create an [ImageSource instance from local file](./ApiReference/image-source/HOW-TO.html#load-image-from-a-local-file)

> Currently loading images form the file system does not respect file-name qualifiers as described [here](./navigation.html#supporting-multiple-screens). We have plans to implement that along with [density-specific qualifiers support.](https://github.com/NativeScript/NativeScript/issues/276).

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

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

You can manually create an [ImageSource instance from resource](./ApiReference/image-source/HOW-TO.html#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 you 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` folder in your app: 

![android resources](img/resources/android-resources.png "android resources")

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 drawable resources in android can be found [here](http://developer.android.com/guide/practices/screens_support.html#DesigningResources).

### 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 that for each scale factor:

* **@1x** - iPad 2 and iPad mini (1st Generation)
{'fraction_non_alphanumeric': 0.10878545855136326, 'fraction_numerical': 0.003442577802258331, 'mean_word_length': 4.723404255319149, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 14, 'https://': 7, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3654450', 'n_tokens_mistral': 2030, 'n_tokens_neox': 1934, 'n_words': 848}