python

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

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

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

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))

# 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.

# 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).