ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Medien

Image

rx.image

Offizielle Doku

Werkstattauftrag

Bitte oben auf die Produktkarte für Poster ein randloses Produktfoto, und per Button soll man auch andere Fotos ansehen können.

rx.image ist das HTML-Element <img>, das ein Bild anzeigt. In src steht die Bildadresse. Externe Adressen (https://…) gehen ebenso wie Dateien im assets-Ordner der App; für sie schreibst du einen Pfad, der mit / beginnt, etwa /logo.png. In alt beschreibst du das Bild für Menschen, die es nicht sehen können.

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

Props ausprobieren

rx.image nimmt Stil-Props an wie eine Box. Du legst die Größe fest und wählst mit object_fit, wie das Bild in seinen Rahmen eingepasst wird.

Sample photo — Legst du height fest, weicht das Seitenverhältnis vom Original ab. Dann schneidet object_fit cover zu und füllt, contain verkleinert, bis alles sichtbar ist, und fill streckt.

Prop	Werte	Standard	Verwendung
`src`	Adresse, `/assets`-Pfad, State-Wert, PIL-Bild	keiner	Das anzuzeigende Bild. Auch als erstes Kind übergeben wird es zu `src`
`alt`	Zeichenkette	keiner	Bildbeschreibung (für Screenreader und wenn das Bild nicht lädt)
`loading`	`"eager"` `"lazy"`	`"eager"`	Bei `"lazy"` wird erst geladen, wenn das Bild in die Nähe des sichtbaren Bereichs kommt
`decoding`	`"async"` `"auto"` `"sync"`	`"auto"`	Ob das Bild getrennt vom Zeichnen der Seite dekodiert wird
`src_set` · `sizes`	Zeichenkette	keiner	Bild in passender Größe für die Bildschirmbreite wählen
`cross_origin`	`"anonymous"` `"use-credentials"`	keiner	CORS-Anfragemodus für Bilder anderer Domains
`referrer_policy`	`"no-referrer"` `"origin"` …	keiner	Welcher Referrer beim Abruf des Bilds gesendet wird
`use_map`	`"#kartenname"`	keiner	Klickbereiche über dem Bild (`<map>`) verknüpfen
Stil	`width` `height` `object_fit` `border_radius` `border` …		Gestaltung über CSS-Eigenschaften wie bei einer Box

An Events nimmt es die Standard-Events wie on_click an.

Gestalten wie eine Box

Stil-Props wie border_radius, border und box_shadow funktionieren direkt. Ein quadratisches Bild mit border_radius="50%" wird zum Kreis. In 0.10 landet die Adresse auch dann in src, wenn du sie wie beim dritten Bild als erstes Kind übergibst.

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

In den Rahmen einpassen: object_fit

Ein Bild mit 400×250 steckt in einem Rahmen von 160×160. cover füllt ihn unter Beibehaltung des Seitenverhältnisses und schneidet ab, was übersteht. contain verkleinert unter Beibehaltung des Seitenverhältnisses, bis alles sichtbar ist, und lässt Leerraum. fill ignoriert das Seitenverhältnis und streckt. Wenn die Felder gleich groß sein müssen, etwa in einer Produktliste, nimmst du meist 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",
)

Bilder passend zur Bildschirmbreite, spät geladen

Listest du in src_set mehrere Größen desselben Bilds auf und sagst mit sizes, welche Breite bei welcher Bildschirmbreite gebraucht wird, wählt der Browser die passende Datei. Auf schmalen Bildschirmen lädt er eine kleine Datei und ist schneller. loading="lazy" verschiebt das Laden, bis das Bild in die Nähe des sichtbaren Bereichs kommt.

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

Bilder über den State wechseln

Steht in src ein State-Wert, wechselt das Bild mit dem Wert. Klickst du unten auf ein kleines Bild, ändert sich das große. Die Adressliste liegt im State, geändert wird nur die gewählte Nummer.

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

Dateien der App und PIL-Bilder

Dateien im assets-Ordner der App gibst du mit einem Pfad an, der mit / beginnt. Legst du außerdem ein Image-Objekt von Pillow (PIL) in eine State-Variable und übergibst es an src, wandelt Reflex es in Bilddaten um und schickt sie mit. Das brauchst du, wenn der Server ein Bild erzeugt oder bearbeitet und es sofort anzeigen soll. Auf dieser Website ist Pillow nicht installiert, deshalb steht es nur als Code da (du brauchst 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 nimmt nur Adressen und PIL-Bilder an. Bilder aus OpenCV (cv2) wandelst du in PIL-Bilder um oder speicherst sie als Datei im assets-Ordner und übergibst dann diese. Sollen Nutzer Bilder hochladen, sieh dir die Seite zu Upload an.

Auftrag erledigt

rx.inset entfernt den oberen Innenabstand der Karte, damit das Bild randlos füllt. Weil die Höhe fest ist, wird es mit object_fit="cover" passend zugeschnitten. Das Foto nutzt denselben State wie die Galerie oben; ein Klick auf einen Button ändert das Foto in beiden Beispielen zugleich.

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

Werkstattnotizen

rx.image(src="…", alt="…"). Nimmt externe Adressen, /assets-Pfade, State-Werte und PIL-Bilder an.
Stil wie bei einer Box: width, height, border_radius, border.
Bei fester Feldgröße schneidet object_fit="cover" zu und füllt (contain zeigt alles).
Mit src_set und sizes die passende Datei zur Bildschirmbreite, mit loading="lazy" spätes Laden.
alt immer ausfüllen: für Menschen, die das Bild nicht sehen, und für den Fall, dass es nicht lädt.

← Zurück

Dynamisches Rendern · Auto Scroll

Weiter →

Medien · Audio

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

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

Built with Reflex