> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mainly.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> A control for displaying images on a node.

<Note>This is a display-only control.</Note>

```
Image(width=-1, height=-1)
```

# Example

This example loads an image from disk and displays it on the node.

```python theme={null}
from mirmod.controls import Image
from mirmod import miranda
import json
import base64

@wob.init()
def init(self):
	self.image_path = None

@wob.receiver("value", "Image Path")
def set_image(self, i):
	self.image_path = i

@wob.receiver("state", "image", control=Image(), hidden=True, connectable=False)
def get_image(self, image_data):
	pass

@wob.execute()
def execute(self):
	# Load and encode the image
	if self.image_path:
		with open(self.image_path, "rb") as f:
			image_bytes = f.read()
		image_url = "data:image/png;base64," + base64.b64encode(image_bytes).decode("utf-8")
	else:
		return

	# Get execution context
	ecx = miranda.get_execution_context()
	ob = ecx.get_current_wob()
	sc = ecx.get_security_context()

	# Update the control with the image data
	miranda.update_api(
		sc, ob,
		"RECEIVER", "image", "state",
		value=image_url, connectable=False, hidden=True
	)
	
	# Notify the GUI to refresh the display
	miranda.notify_gui(sc, json.dumps({
		"action": "update[VIEW]",
		"data": { "id": ob.id, "metadata_id": ob.metadata_id }
	}))
```

# Parameters

| Name   | Type | Description                                                         |
| ------ | ---- | ------------------------------------------------------------------- |
| width  | int  | Display width in pixels. Use -1 for automatic sizing. Default: -1.  |
| height | int  | Display height in pixels. Use -1 for automatic sizing. Default: -1. |