Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Media

/

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.

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

Image composes a box and can be styled simlarly.

rx.chakra.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.

An Unsplash Image
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 rx.chakra.vstack(
        rx.chakra.image(src=ImageState.image)
    )

Display an image.

PropTypeDescriptionValues
alignstr

How to align the image within its bounds. It maps to css object-position property.

fallbackComponent

Fallback Reflex component to show if image is loading or image fails.

fallback_srcstr

Fallback image src to show if image is loading or image fails.

fitstr

How the image to fit within its bounds. It maps to css object-fit property.

html_heightstr

The native HTML height attribute to the passed to the img.

html_widthstr

The native HTML width attribute to the passed to the img.

ignore_fallbackbool

If true, opt out of the fallbackSrc logic and use as img.

loadingLiteral

"eager" | "lazy"

srcAny

The path/url to the image or PIL image object.

altstr

The alt text of the image.

src_setstr

Provide multiple sources for an image, allowing the browser to select the most appropriate source based on factors like screen resolution and device capabilities. Learn more here

Event Triggers

TriggerDescription
on_error

The on_error event handler is called when the user encounters an error in a form. For example, it’s called when the user clicks on a error button.

on_load

The on_load event handler is called when the user loads a form. For example, it is called when the user clicks on a load button.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting