> For the complete documentation index, see [llms.txt](https://appmaster.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appmaster.gitbook.io/docs/web-apps/components-list/image.md).

# Image

## Look\&Feel Settings:

**Image alt** (not mandatory) - image description.

**Width** (mandatory) - image width.

**Height** (mandatory) - image height.

**Visible** (mandatory) - makes the component visible if turned on. Enabled by default.

**Name** (mandatory) - name of component.

![](/files/uPTq6en0hyxG8xGROE1V)

## **Workflow triggers:**

* **onCreate** – fires when the element is created on the page; 
* **onShow** – fires when the component changes its state to visible (displayed on the page); 
* **onHide** – fires when the component changes its state to hidden (stops being displayed); 
* **onDestroy** – fires when the component is destroyed;
* **onClick** - fires when  the component is clicked.

## **Component Actions:**

### **Image Get Properties**

Gets the image's properties.\
\
**Input** parameters:

* **Component Id** \[*string*] *-* image component's identifier.

**Output** parameters:

* **Width** *\[string]* - image width;
* **Height** \[*string*] - image height;
* **Image URL** \[*string*] - image address;
* **Tooltip** \[*string*] - tooltip string;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](/files/KJj2Fu92RpOBNalPN1Yc)

### **Image Set Properties**

Sets the image's properties.\
\
**Input** parameters:

* **Component Id** \[*string*] *-* image component's identifier;
* **Width** *\[string]* - image width;
* **Height** \[*string*] - image height;
* **Image URL** \[*string*] - image address;
* **Tooltip** \[*string*] - tooltip string;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](/files/R1djV8LliTxxZjAIKfbI)

### **Image Update Properties**

Update the image's properties.\
\
**Input** parameters:

* **Component Id** \[*string*] *-* image component's identifier;
* **Width** *\[string]* - image width;
* **Height** \[*string*] - image height;
* **Image URL** \[*string*] - image address;
* **Tooltip** \[*string*] - tooltip string;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](/files/zASA9qR5K7XNafThKsWK)

## Usage example:

The element is great for page decoration, for example, for a logo.

![](/files/YmXt8g0G3fLddURgpuVL)