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에서는 세 번째 그림처럼 주소를 첫 번째 자식으로 넘겨도 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를 쓰므로, 버튼을 누르면 두 예제의 사진이 함께 바뀝니다.

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

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex