> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.image
---

```python exec
import reflex as rx
```

# Image

The Image component can display an image given a `src` path as an argument.
This could either be a local path from the assets folder or an external link.

```python demo
rx.image(
    src="https://web.reflex-assets.dev/other/logo.jpg", width="100px", height="auto"
)
```

Image composes a box and can be styled similarly.

```python demo
rx.image(
    src="https://web.reflex-assets.dev/other/logo.jpg",
    width="100px",
    height="auto",
    border_radius="15px 50px",
    border="5px solid #555",
)
```

You can also pass a `PIL` image object as the `src`.

```python demo box
rx.image(src="https://picsum.photos/id/1/200/300", alt="An Unsplash Image")
```

```python
from PIL import Image
import requests


class ImageState(rx.State):
    url: str = "https://picsum.photos/id/1/200/300"
    image: Image.Image = Image.open(requests.get(url, stream=True).raw)


def image_pil_example():
    return rx.vstack(rx.image(src=ImageState.image))
```

```md alert info
# rx.image only accepts URLs and Pillow Images

A cv2 image must be converted to a PIL image to be passed directly to `rx.image` as a State variable, or saved to the `assets` folder and then passed to the `rx.image` component.
```

```md alert info
# How to let your user upload an image

To let a user upload an image to your app check out the [upload docs](/docs/library/forms/upload).
```

## API Reference

### rx.image

Display the img element.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. |
| `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
| `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. |
| `context_menu` | str | - | Defines the ID of a <menu> element which will serve as the element's context menu. |
| `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
| `draggable` | bool | - | Defines whether the element can be dragged. |
| `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. |
| `hidden` | bool | - | Defines whether the element is hidden. |
| `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. |
| `item_prop` | str | - | Defines the name of the element for metadata purposes. |
| `lang` | str | - | Defines the language used in the element. |
| `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. |
| `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. |
| `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. |
| `tab_index` | int | - | Defines the position of the current element in the tabbing order. |
| `title` | str | - | Defines a tooltip for the element. |
| `alt` | str | - | Alternative text for the image. |
| `cross_origin` | Literal["anonymous", "use-credentials"] | - | Configures the CORS requests for the image. |
| `decoding` | Literal["async", "auto", "sync"] | - | How the image should be decoded. |
| `loading` | Literal["eager", "lazy"] | - | Specifies the loading behavior of the image. |
| `referrer_policy` | Literal["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"] | - | Referrer policy for the image. |
| `sizes` | str | - | Sizes of the image for different layouts. |
| `src` | Any | - | URL of the image to display. |
| `src_set` | str | - | A set of source sizes and URLs for responsive images. |
| `use_map` | str | - | The name of the map to use with the image. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/