# Image

## Image Overview

The Image component lets you display pictures in your app and pairs nicely with image based components like the [Camera](https://docs.thunkable.com/snap-to-place/camera), [Photo Library](https://docs.thunkable.com/snap-to-place/photo-library), [Image Recognizer](https://docs.thunkable.com/snap-to-place/image-recognizer) and [Media DB](https://docs.thunkable.com/snap-to-place/media-db)

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6AMC7ucr1x1DeLW5%2Fimage-%E2%9C%95-fig-1.png?generation=1524497171329735\&alt=media)

## Set Image

There are a few ways you can display an image in your app:<br>

1. **Upload a picture to your project Files:**\
   \ <img src="https://689802330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUe3rgJfvQYLrpDR1HfWv%2Fuploads%2FC8xCYHWcyK3MMymEZUOE%2Ffiles_upload_file.png?alt=media&#x26;token=be813060-1eaf-4b65-8446-cdaf12abcb0d" alt="" data-size="original"><br>
2. **Provide a link in the Image properties**\
   \
   ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUe3rgJfvQYLrpDR1HfWv%2Fuploads%2FRSSu7t8KypzYEHSP3Rui%2Fimg_type_URL.png?alt=media\&token=c2895d52-8f18-42e2-91fd-b845490bfe06)<br>
3. **Take a picture with the Camera component**

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWjGwoAJX1Go4iLtTuI%2F-MWjIlJSBoqS90cd6iju%2Ftake_photo.png?alt=media\&token=197e92b3-f441-4fa7-8ae1-f779db6ddf80)

The blocks above open up your phone’s camera and set the Image component to the picture that you took.&#x20;

## Edit Image size

You can set how tall the Image is using the height property and set how wide it is using the width property.

**Height**

* **Fill container -** The Image fills the entire screen vertically
* **Fit contents -** The Image’s height changes to fit the contents it contains
* **Relative size -** The Image fills the specified percentage of the screen
* **Absolute size -** Sizes the Image to a specified number of pixels

**Width**

* **Fill container -** The Image fills the entire screen horizontally
* **Fit contents -** The Image’s width changes to fit the contents it contains
* **Relative size -** The Image fills the specified percentage of the screen
* **Absolute -** Sizes the Image to a specified number of pixels

### Resizing the Image

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6ATcbR67_h5kchZ5%2Fimage-%E2%9C%95-fig-3.png?generation=1524497171200709\&alt=media)

With the Resize Mode property, you can do the following:

* **Cover:** Resizes the picture to its max height or width regardless without changing the image quality.
* **Contain:** Resizes the picture to fit the area without changing its quality
* **Stretch:** The picture’s height will change to fill the image component length-wise
* **Repeat:** Repeats the picture at its original quality within the image component area
* **Center:** Positions the picture in the middle of the image component

## Style the Image

You can style the image with the following properties:

* **Border**
  * **Width:** Enter how wide you want the border outline of the image to be&#x20;
  * **Color:** Pick a color for the border of the image
  * **Radius:** Enter how round you want the edges of the border for the image to be&#x20;

## Add spacing

You can change the spacing and positioning of the Image with the Margin and Padding properties.

**Margin**

* You can specify how much space you want between the edges of the image and the screen using either pixel or percent values.

**Padding**

* You can specify how much space you want between the border and the contents of the image using either pixel or percent value.&#x20;

## Events

### Click

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5SILG7OF_dbQByT48%2F-MA5UhjbbN2EWT4h-qPI%2Fimage_click.png?alt=media\&token=5c09c8bc-43b4-4350-a714-8818e37b0052)

This event handler is fired when the user clicks on the image.

## Properties

### Computed Dimensions

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm2zo0AcjGbmcHkxNq%2F-MXm4_gzA4V75UBtjPt2%2FScreen%20Shot%202021-04-08%20at%204.19.37%20PM%20copy.jpg?alt=media\&token=0a2210fd-a656-4261-9a2e-f43c301b5b84)

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm2zo0AcjGbmcHkxNq%2F-MXm4gHCaiImwrDKLJg1%2FScreen%20Shot%202021-04-08%20at%204.19.37%20PM%20copy.jpg?alt=media\&token=2513caaa-604f-43fd-9cf5-e66e4a643110)

The `Computed Height` and `Computed Width` blocks return the on screen dimensions of the image, after it has been rendered on-screen. The value returned is an integer, representing the size of the image in pixels.

### Height&#x20;

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm2zo0AcjGbmcHkxNq%2F-MXm4lcsMkjd9v6AwdpE%2FScreen%20Shot%202021-04-08%20at%204.19.37%20PM%20copy.jpg?alt=media\&token=f63d992f-bf5b-4b28-8431-b36fd4a8e62a)

The set and get height blocks work with the Height property of the image component. Acceptable input values are.&#x20;

* Number of Pixels
* Percentage Height
* "Fit Contents"
* "Fill Container"

### Picture&#x20;

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWjGwoAJX1Go4iLtTuI%2F-MWjJeCYHWamcf2kqWkd%2Fpicture.png?alt=media\&token=afd0c55c-25b5-4972-b290-c6c558cf463b)

The set and get picture blocks work with picture property of the image component. Pictures can be uploaded as local assets or specified as URLs&#x20;

### Resize Mode&#x20;

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWjGwoAJX1Go4iLtTuI%2F-MWjJgDtUKIyrOUOvmcc%2Fresize_mode.png?alt=media\&token=9953b634-99cb-4792-bc22-40b054ddae21)

The set and get resize mode blocks work with how the picture is scaled within the image component. Acceptable values are:

* Cover
* Contain
* Stretch
* Repeat
* Center

### Visible&#x20;

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWjGwoAJX1Go4iLtTuI%2F-MWjJiJsCF9zLqAdiZft%2Fvisible.png?alt=media\&token=67fbfff4-0a0e-42be-98f1-8cf49edfd5b2)

The set and get visible blocks are used to show or hide the entire image component. Acceptable values are:

* True
* False

### Width

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm2zo0AcjGbmcHkxNq%2F-MXm4rR0nd36eBwJpLSH%2FScreen%20Shot%202021-04-08%20at%204.19.37%20PM%20copy.jpg?alt=media\&token=e7664be7-c8a1-442f-a960-30041c0a7098)

\
The set and get width blocks work with the Width property of the image component. Acceptable values are.‌

* Number of Pixels
* Percentage Width
* "Fit Contents"
* "Fill Container"