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.

rc.image(
    src="/reflex_banner.png", width="100px", height="auto"
)

Image composes a box and can be styled simlarly.

rc.image(
    src="/reflex_banner.png",
    width="100px",
    height="auto",
    border_radius="15px 50px",
    border="5px solid #555",
    box_shadow="lg",
)

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

from PIL import Image
import requests


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


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

rc.Image

Display an image.

Prop	Type \| Values	Default
`align`	`str`
`fallback`	`Component`
`fallback_src`	`str`
`fit`	`str`
`html_height`	`str`
`html_width`	`str`
`ignore_fallback`	`bool`
`loading`	`"eager" \| "lazy"`
`src`	`Any`
`alt`	`str`
`src_set`	`str`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_error`	Fired when the image fails to load.
`on_load`	Fired when the image is loaded.