Image

fandhe-frontend-pre-styled-ui の image mod が提供するスタイル済み Image 部品です。

img 要素をラップした画像表示部品です。ImageFit（Cover/Contain/Fill/ScaleDown/NoFit）・AspectRatio（Auto/Square/Landscape/Portrait/Video）・ImageShape（Square/Rounded/Circle、角丸）の 3 軸で表示形式を切り替えます。base は height: auto を持ち、max-width: 100% による縮小時も縦横比を保ちます。src は is_safe_url 検証を経由し、javascript: 等の危険なスキームは出力自体が落とされます。

Demo

写真等の静的コンテンツを表示する img の styled ラッパー。fit（object-fit）・aspect-ratio・shape（角丸）を型安全な props で切り替えます。状態機械は持たず、avatar の ImageStatus とは独立です。

Shape

Features

ImageFit（Cover/Contain/Fill/ScaleDown/NoFit、crates/pre-styled-ui/src/image.rs:76-107）で object-fit を切り替える
AspectRatio（Auto/Square/Landscape/Portrait/Video、image.rs:113-141）で aspect-ratio を切り替える（イシュー #1562 で Landscape(4:3)/Portrait(3:4) を追加）
ImageShape（Square/Rounded/Circle、image.rs:150-172）で角丸を切り替える（イシュー #1562 で新設。radius トークン --fandhe-radius-none/-md/-full 経由）
base に height: auto を持つ（image.rs、イシュー #1562）。max-width: 100% による縮小時に縦横比を保つ
src は既定エスケープ + is_safe_url 検証を経由し危険なスキーム（javascript: 等・data: 等）は出力自体を落とす（image.rs テスト dangerous_src_scheme_is_not_output_but_sibling_attrs_survive）

Anatomy

root

API Reference

Arguments

Name	Type	Default	Description
`src`	`&str`	(必須)	画像 URL（image.rs:258、is_safe_url 検証を経由）。
`alt`	`&str`	(必須)	代替テキスト（image.rs:261、空文字列も明示的な選択として許容）。
`fit`	`ImageFit`	`Cover`	object-fit（image.rs:76-107, 263）。
`aspect_ratio`	`AspectRatio`	`Auto`	aspect-ratio（image.rs:113-141, 265）。
`shape`	`ImageShape`	`Square`	角丸（image.rs:150-172, 267。イシュー #1562 で新設）。

Examples

Square contain, rounded

Contain fit + Square aspect ratio + Rounded shape の例です。

Accessibility

WAI-ARIA

Attribute	Description
alt（必須引数）	代替テキストを img 要素の alt として必ず出力する（image.rs:261）。role/aria-* 自体は固有の出力を持たない。