Image

画像を描画し、読み込みに失敗したときは組み込みの代替画像へ切り替わるコンポーネントです。

使いどころ：読み込みに失敗しても崩れずプレースホルダーへ落ちる画像が欲しいとき。<r-img> は組み込みの「壊れた画像」グラフィック、または指定した fallback に差し替えます。

クイックスタート

html

<r-img src="https://picsum.photos/id/1015/240/160"></r-img>

プロパティ	型	既定値	説明
`src`	`string`	`''`	画像の URL。リアクティブで、マウント後に変えると読み込み直します。
`alt`	`string`	`''`	内側の `<img>` へ渡す代替テキスト。空なら装飾目的とみなされます。
`fallback`	`string`	組み込みの「壊れた画像」data URI	`src` の読み込みに失敗したときに表示する画像。
`sheet`	`string`	`''`	コンポーネントの shadow DOM に注入する CSS。

src、alt、fallback、sheet はいずれも監視されており、リアクティブに更新されます。マウント済みの要素でどれを変えても即座に反映されます。

html

<r-img src="https://picsum.photos/id/1025/240/160"></r-img>

alt は内側の <img> へそのまま渡されます。装飾目的の画像では既定どおり空のままにしてスクリーンリーダーに読み飛ばさせ、意味のある画像には説明を与えてください。

html

<r-img src="https://picsum.photos/id/1035/240/160" alt="夕暮れの山上湖"></r-img>

src の読み込みに失敗すると、コンポーネントは fallback に差し替えます。fallback を指定していない場合は組み込みの「壊れた画像」プレースホルダーが使われます。下の例では src が無効な URL なので、代替画像が表示されます。

html

<r-img
  src="https://example.invalid/does-not-exist.png"
  fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...（壊れた画像のプレースホルダー）..."
></r-img>

sheet はコンポーネントの shadow DOM へ生の CSS を注入します。内部の .ran-image コンテナや内側の <img> にスタイルを当てるのに使います。

html

<r-img
  src="https://picsum.photos/id/1043/240/160"
  sheet="img { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.25); }"
></r-img>

ありません。r-img はカスタムイベントを派発しません。

src はいつでも変えてよい：src はリアクティブなので、マウント済みの要素で更新すれば画像を読み込み直します。新しい URL が失敗した場合も代替画像はきちんと働きます。
意味のある画像には alt を：スクリーンリーダー向けに内容を説明してください。alt を空にするのは純粋に装飾目的の画像だけです。
組み込みの代替画像に任せる：既定の「壊れた画像」プレースホルダーは自動で使われます。ブランドや文脈に合ったものを出したいときだけ fallback を指定してください。
スタイルは sheet で：画像は shadow DOM の中にあるので、枠線・角丸・サイズは sheet 属性（またはコンポーネントの CSS 変数）で当てます。