Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

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.image(src="/logo.jpg", width="100px", height="auto")

Image composes a box and can be styled simlarly.

rx.image(
    src="/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.

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

API Reference

Img

Display the img element.

Prop	Type	Description
`align`	Union	Image alignment with respect to its surrounding elements
`alt`	Union	Alternative text for the image
`cross_origin`	Union	Configures the CORS requests for the image
`decoding`	Union	How the image should be decoded
`intrinsicsize`	Union	Specifies an intrinsic size for the image
`ismap`	Union	Whether the image is a server-side image map
`loading`	Union	Specifies the loading behavior of the image
`referrer_policy`	Union	Referrer policy for the image
`sizes`	Union	Sizes of the image for different layouts
`src`	Any	URL of the image to display
`src_set`	Union	A set of source sizes and URLs for responsive images
`use_map`	Union	The name of the map to use with the image

Event Triggers

See the full list of default event triggers

← Audio Video →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Image

API Reference

Img