# Image

The **Image** component allows you to display graphics within your Squirrel projects. Media types supported include .jpg, .png, .bmp, .gif, etc.

## Image Properties

The **Image** component properties consist of **LAYOUT & POSITONING**, **GENERAL**, **STYLING**, and **DYNAMIC VISIBILITY** sections.

This guide will describe all sections besides the [**Layout & Positioning**](https://learn.squirrel365.io/components-functions-and-connections/overview/layout-and-positioning) and [**Dynamic Visiblity**](https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility) sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this [Set Property Values](https://squirrel365.io/knowledgebase/set-property-values/) article for more information on using the different methods.

***

### GENERAL

![](https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FQQgTUrPR3zpGnFppy5Bw%2FGeneral_properties.png?alt=media\&token=d3bd8f65-9932-4994-9127-380ec707f527)

* **Source image from**
  * **My Library** – select an image from the Image Library, uploaded from your computer
  * **URL**  – get the image from a web link
  * **Unsplash** – search for an image in the Unsplash library

#### My Library

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F8Am5ryEVodQpwQmQhirB%2FMyLibrary.png?alt=media&#x26;token=ef3c0534-62c9-4e1c-944c-a8fa9f6e4fe2" alt="" width="282"><figcaption></figcaption></figure>

**Upload image** — The Import button is only available when the My Library option is selected in the 'Source image from' property. Click to open the File Explorer window and locate the image source file.

Once selected, the Image will be uploaded and can be accessed through the Image Library.

#### URL

**Image URL** — Available only when the URL option is selected in the 'Source image from' property. Type or paste the URL into the property field, or bind to a cell in the spreadsheet containing the required image's URL.

{% hint style="info" %}
Note that for both URL and Unsplash sources, the project must have access to the internet when it is running, for the image to be displayed
{% endhint %}

#### Unsplash

**Search —** The search box is available when the Unsplash option is chosen. Type in a search term and hit return to see a selection of related images. Click on one of the images to insert it into your project.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F2Na5PU3idMoR2ExasbJx%2FUnsplash_search.png?alt=media&#x26;token=f240b871-223e-4bd3-a7b0-b687e5eda937" alt="" width="281"><figcaption></figcaption></figure>

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FQgX60eROWeogqdKrJrVH%2FUnsplash_selected.png?alt=media&#x26;token=db261481-0b8a-4068-b20a-4c71d1d42ce5" alt="" width="281"><figcaption></figcaption></figure>

* **Opacity** – This determines the transparency of the **Image** component and can be set in 4 different ways:
  * Using the opacity slider
  * Typing in a value
  * Using the spinner buttons (values are adjusted by 10% per click)
  * Binding to value in a spreadsheet cell
* **Resize image to component** – Checking this option will constrain the image size to the proportions of the **Image** component.
* **Maintain aspect ratio** – This option maintains the image’s natural width-to-height ratio (its aspect ratio) as the component is resized, ensuring the image is not distorted by the resize. (This option is only available when “Resize image to component” is selected)
* **Block mouse events** – Checking this option will stop mouse interactions with components covered by the **Image** component, e.g. a slider component sitting on a layer beneath the image component would not function. A partially covered component may still have some functionality. The option is checked by default.

### STYLING

**Corners** - adjust the slider to adjust the roundness of the image component's corners.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.squirrel365.io/components-functions-and-connections/overview/media/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.