ReflexKR

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

メディア

Image

rx.image

公式ドキュメント

工房の注文書

ポスター商品のカード上部に商品写真をいっぱいに入れ、ボタンでほかの写真も見られるようにしてください。

rx.image は画像を表示する HTML の <img> 要素です。src に画像のアドレスを入れます。外部アドレス（https://…）も使えますし、アプリの assets フォルダーに置いたファイルなら /logo.png のように / で始まるパスを書きます。alt には、画像を見られない人のための説明を書きます。

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

プロパティを変えてみる

rx.image は Box と同じようにスタイルプロパティを受け取ります。サイズを決め、object_fit で画像をボックスに合わせる方法を選びます。

Sample photo — height を固定すると元画像と縦横比が変わります。そのとき object_fit が cover なら切り取って埋め、contain なら全体が見えるよう縮め、fill なら引き伸ばします。

プロパティ	値	既定値	用途
`src`	アドレス、`/assets のパス`、State の値、PIL 画像	なし	表示する画像。最初の子として渡しても `src` になる
`alt`	文字列	なし	画像の説明（スクリーンリーダー、画像が開けないとき）
`loading`	`"eager"` `"lazy"`	`"eager"`	`"lazy"` なら画面に近づいたときにダウンロード
`decoding`	`"async"` `"auto"` `"sync"`	`"auto"`	画像のデコードを描画と別に行うか
`src_set` · `sizes`	文字列	なし	画面幅に合ったサイズの画像を選ぶ
`cross_origin`	`"anonymous"` `"use-credentials"`	なし	別ドメインの画像の CORS リクエスト方式
`referrer_policy`	`"no-referrer"` `"origin"` …	なし	画像をリクエストするときに送るリファラー
`use_map`	`"#マップ名"`	なし	画像上のクリック領域（`<map>`）をつなぐ
スタイル	`width` `height` `object_fit` `border_radius` `border` …		Box と同じく CSS プロパティで装飾

イベントは on_click などの基本イベントを受け取ります。

Box のように装飾する

border_radius、border、box_shadow などのスタイルプロパティをそのまま使います。border_radius="50%" の正方形の画像は円になります。0.10 では、3つ目の画像のようにアドレスを最初の子として渡しても 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",
)

ボックスに合わせる：object_fit

400×250 の画像を 160×160 のボックスに入れました。cover は縦横比を保ったままいっぱいに埋め、はみ出た部分を切り取ります。contain は縦横比を保ったまま全体が見えるよう縮め、余白を残します。fill は縦横比を無視して引き伸ばします。商品一覧のようにマスの大きさを揃えたいときは、普通 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",
)

画面幅に合った画像、遅延読み込み

src_set に同じ画像の複数のサイズを書き、sizes で画面幅ごとに使う幅を伝えると、ブラウザが適切なファイルを選んでダウンロードします。狭い画面では小さなファイルを受け取るので速くなります。loading="lazy" は、画像が画面に近づくまでダウンロードを遅らせます。

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

State で画像を切り替える

src に State の値を入れると、値が変わったときに画像も変わります。下の小さな画像をクリックすると大きな画像が切り替わります。アドレスのリストを State に置き、選んだ番号だけを変えます。

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

アプリ内のファイルと PIL 画像

アプリの assets フォルダーにあるファイルは、/ で始まるパスで指定します。また State 変数に Pillow（PIL）の Image オブジェクトを置いて src に渡すと、Reflex が画像データに変換して送ってくれます。サーバーで画像を作ったり加工したりして、すぐに表示したいときに使います。このサイトには Pillow がインストールされていないため、コードだけを示します（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 が受け取れるのはアドレスと PIL 画像だけです。OpenCV（cv2）の画像は、PIL 画像に変換するか assets フォルダーにファイルとして保存してから渡します。ユーザーに画像をアップロードさせたいなら Upload のページを見てください。

注文書を仕上げる

rx.inset でカード上部の余白をなくし、画像をいっぱいに入れます。高さを固定したので、object_fit="cover" で切り取って合わせます。写真は上のギャラリーと同じ State を使うので、ボタンを押すと2つの例の写真が一緒に変わります。

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

工房ノート

rx.image(src="…", alt="…")。外部アドレス、/assets のパス、State の値、PIL 画像を受け取る。
スタイルは Box と同じ：width・height・border_radius・border。
マスの大きさを固定するなら object_fit="cover" で切り取って埋める（contain は全体が見える）。
src_set・sizes で画面幅に合ったファイルを、loading="lazy" で遅延読み込みを。
alt は必ず書く。画像を見られない人と、画像が開けないときのために。

← 前へ

動的レンダリング · Auto Scroll

メディア · Audio

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex