## Documentation Index

Fetch the complete documentation index at: [/llms.txt](https://dev.writer.com/llms.txt)

Use this file to discover all available pages before exploring further.

A component to display images.

Use your app’s static folder to serve images directly. For example, `static/my_image.png`. Alternatively, pass a Matplotlib figure via state. `state["my_fig"] = fig` and then setting the _Image_ source to `@{fig}` You can also use packed files or bytes: `state["img_b"] = wf.pack_bytes(img_bytes, "image/png")` `state["img_f"] = wf.pack_file(img_file, "image/png")`

## Fields

| Name                   | Type   | Description                                                                 | Options |
|------------------------|--------|-----------------------------------------------------------------------------|--------|
| Source                 | Text   | A valid URL. Alternatively, you can provide a state reference to a Matplotlib figure or a packed file. | -      |
| Caption                | Text   | Leave blank to hide.                                                      | -      |
| Max width (px)        | Number | -                                                                           | -      |
| Max height (px)       | Number | -                                                                           | -      |
| Secondary text         | Color  | -                                                                           | -      |
| Custom CSS classes     | Text   | CSS classes, separated by spaces. You can define classes in custom stylesheets. | -      |

## Events

**wf-click**

Capture single clicks.

```python
def click_handler(state):
    
    # Increment counter when the image is clicked
    state["counter"] += 1
```