Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

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.

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

Display the img element.

PropTypeDescriptionValues
alignUnion

Image alignment with respect to its surrounding elements

altUnion

Alternative text for the image

cross_originUnion

Configures the CORS requests for the image

decodingUnion

How the image should be decoded

intrinsicsizeUnion

Specifies an intrinsic size for the image

ismapUnion

Whether the image is a server-side image map

loadingUnion

Specifies the loading behavior of the image

referrer_policyUnion

Referrer policy for the image

sizesUnion

Sizes of the image for different layouts

srcAny

URL of the image to display

src_setUnion

A set of source sizes and URLs for responsive images

use_mapUnion

The name of the map to use with the image

Event Triggers

No component specific event triggers

← AudioVideo →

Did you find this useful?