ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Multimedia

Image

rx.image

Documentación oficial

Pedido del taller

En la parte superior de la tarjeta de un póster, pon la foto del producto a sangre y deja ver otras fotos con un botón.

rx.image es el elemento HTML <img>, que muestra una imagen. En src va la dirección de la imagen: puede ser externa (https://…) o, si el archivo está en la carpeta assets de la app, una ruta que empiece por /, como /logo.png. En alt se escribe una descripción para quien no puede ver la imagen.

rx.image(src="https://picsum.photos/id/1015/400/250", alt="A river between mountains", width="240px", height="auto")

Prueba las propiedades

rx.image acepta propiedades de estilo como un Box. Fija el tamaño y elige con object_fit cómo se ajusta la imagen a la caja.

Sample photo — Si fijas height, la proporción deja de coincidir con la del original. Entonces, con object_fit en cover se recorta para llenar, con contain se reduce para que se vea entera y con fill se estira.

Propiedad	Valores	Por defecto	Uso
`src`	dirección, `ruta de /assets`, valor del State, imagen PIL	ninguno	Imagen que se muestra. Si se pasa como primer hijo, también va a `src`
`alt`	cadena	ninguno	Descripción de la imagen (lectores de pantalla, imagen que no carga)
`loading`	`"eager"` `"lazy"`	`"eager"`	Con `"lazy"` se descarga al acercarse a la pantalla
`decoding`	`"async"` `"auto"` `"sync"`	`"auto"`	Si se decodifica la imagen aparte del dibujado de la pantalla
`src_set` · `sizes`	cadena	ninguno	Elegir la imagen del tamaño adecuado al ancho de pantalla
`cross_origin`	`"anonymous"` `"use-credentials"`	ninguno	Modo de petición CORS para imágenes de otro dominio
`referrer_policy`	`"no-referrer"` `"origin"` …	ninguno	Referrer que se envía al pedir la imagen
`use_map`	`"#nombre-del-mapa"`	ninguno	Conecta zonas clicables sobre la imagen (`<map>`)
estilo	`width` `height` `object_fit` `border_radius` `border` …		Decorar con propiedades CSS, como un Box

Acepta eventos básicos, como on_click.

Decorar como un Box

Las propiedades de estilo como border_radius, border o box_shadow se usan tal cual. Una imagen cuadrada con border_radius="50%" se vuelve un círculo. En 0.10, como en la tercera imagen, si pasas la dirección como primer hijo también va a src.

rx.flex(
    rx.image(
        src="https://picsum.photos/id/237/300/300",
        alt="A black puppy",
        width="120px",
        height="auto",
        border_radius="15px 50px",
        border="5px solid #555",
    ),
    rx.image(
        src="https://picsum.photos/id/1025/300/300",
        alt="A pug in a blanket",
        width="120px",
        border_radius="50%",
        box_shadow="0 4px 14px rgba(0, 0, 0, 0.25)",
    ),
    rx.image("https://picsum.photos/id/1043/300/300", alt="Positional src", width="120px", border_radius="8px"),
    spacing="4",
    align="center",
    wrap="wrap",
)

Ajustar a la caja: object_fit

Hemos metido una imagen de 400×250 en una caja de 160×160. cover llena la caja manteniendo la proporción y recorta lo que sobra. contain la reduce manteniendo la proporción para que se vea entera y deja huecos. fill ignora la proporción y la estira. Cuando hay que igualar el tamaño de las celdas, como en un listado de productos, lo normal es cover.

cover

contain

fill

rx.flex(
    rx.vstack(
        rx.image(src="https://picsum.photos/id/1039/400/250", alt="cover", width="160px", height="160px", object_fit="cover"),
        rx.code("cover"),
        align="center",
    ),
    rx.vstack(
        rx.image(src="https://picsum.photos/id/1039/400/250", alt="contain", width="160px", height="160px", object_fit="contain",
                 background=rx.color("gray", 4)),
        rx.code("contain"),
        align="center",
    ),
    rx.vstack(
        rx.image(src="https://picsum.photos/id/1039/400/250", alt="fill", width="160px", height="160px", object_fit="fill"),
        rx.code("fill"),
        align="center",
    ),
    spacing="4",
    wrap="wrap",
)

Imagen según el ancho de pantalla y carga diferida

Si en src_set indicas varios tamaños de la misma imagen y con sizes dices qué ancho se usa en cada ancho de pantalla, el navegador elige y descarga el archivo adecuado. En pantallas estrechas descarga un archivo pequeño y va más rápido. loading="lazy" retrasa la descarga hasta que la imagen se acerca a la pantalla.

rx.image(
    src="https://picsum.photos/id/1060/800/500",
    src_set="https://picsum.photos/id/1060/400/250 400w, https://picsum.photos/id/1060/800/500 800w",
    sizes="(max-width: 600px) 400px, 800px",
    alt="Coffee being poured",
    loading="lazy",
    decoding="async",
    width="100%",
    max_width="400px",
    border_radius="8px",
)

Cambiar la imagen con el State

Si pones un valor del State en src, la imagen cambia cuando cambia el valor. Al pulsar una miniatura de abajo, cambia la imagen grande. La lista de direcciones vive en el State y solo cambiamos el número elegido.

class ImageGalleryState(rx.State):
    photos: list[str] = [
        "https://picsum.photos/id/1015/480/300",
        "https://picsum.photos/id/1025/480/300",
        "https://picsum.photos/id/1043/480/300",
        "https://picsum.photos/id/1080/480/300",
    ]
    current: int = 0

    @rx.event
    def show(self, i: int):
        self.current = i


rx.vstack(
    rx.image(
        src=ImageGalleryState.photos[ImageGalleryState.current],
        alt="Selected photo",
        width="100%",
        max_width="480px",
        aspect_ratio="16 / 10",
        object_fit="cover",
        border_radius="8px",
    ),
    rx.flex(
        rx.foreach(
            ImageGalleryState.photos,
            lambda p, i: rx.image(
                src=p,
                alt="Thumbnail",
                width="72px",
                height="45px",
                object_fit="cover",
                border_radius="4px",
                cursor="pointer",
                opacity=rx.cond(i == ImageGalleryState.current, "1", "0.45"),
                on_click=ImageGalleryState.show(i),
            ),
        ),
        spacing="2",
    ),
    spacing="3",
)

Archivos de la app e imágenes PIL

Los archivos de la carpeta assets de la app se usan con una ruta que empieza por /. Además, si guardas en una variable del State un objeto Image de Pillow (PIL) y lo pasas a src, Reflex lo convierte en datos de imagen y lo envía. Sirve para mostrar al momento una imagen creada o modificada en el servidor. Este sitio no tiene Pillow instalado, así que solo se muestra como código (hace falta pip install pillow).

rx.image(src="/logo.png", alt="Logo", width="80px")   # assets/logo.png

from PIL import Image
import requests

class ImagePilState(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.image(src=ImagePilState.image, alt="Dynamically generated image")

rx.image solo acepta direcciones e imágenes PIL. Una imagen de OpenCV (cv2) hay que convertirla en imagen PIL o guardarla como archivo en la carpeta assets antes de pasarla. Si quieres que los usuarios suban imágenes, consulta la página de Upload.

Completar el pedido

Con rx.inset quitamos el margen superior de la tarjeta y la imagen llena todo el ancho. Como la altura es fija, la recortamos con object_fit="cover". La foto usa el mismo State que la galería de arriba, así que al pulsar el botón cambian las fotos de los dos ejemplos.

Mountain Trip Print

A3 poster, matte paper

rx.card(
    rx.inset(
        rx.image(
            src=ImageGalleryState.photos[ImageGalleryState.current],
            alt="Product photo",
            width="100%",
            height="180px",
            object_fit="cover",
            loading="lazy",
        ),
        side="top",
        pb="current",
    ),
    rx.text("Mountain Trip Print", weight="bold"),
    rx.text("A3 poster, matte paper", size="2", color_scheme="gray"),
    rx.button("Next photo", size="1", variant="soft", margin_top="8px",
              on_click=ImageGalleryState.show((ImageGalleryState.current + 1) % 4)),
    max_width="300px",
)

Notas del taller

rx.image(src="…", alt="…"). Acepta una dirección externa, una ruta de /assets, un valor del State o una imagen PIL.
El estilo, como en un Box: width, height, border_radius, border.
Si fijas el tamaño de la celda, recorta y llena con object_fit="cover" (contain la muestra entera).
src_set y sizes para el archivo adecuado al ancho de pantalla; loading="lazy" para la carga diferida.
Escribe siempre alt: para quien no puede ver la imagen y para cuando no carga.

← Anterior

Renderizado dinámico · Auto Scroll

Multimedia · Audio

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex