Image

Bildkomponente, die auf ein eingebautes Ersatzbild wechselt, wenn die Quelle nicht geladen werden kann.

Nimm sie, wenn du ein Bild brauchst, das bei einer fehlschlagenden Quelle sauber auf einen Platzhalter zurückfällt: <r-img> wechselt auf eine eingebaute „Bild kaputt“-Grafik oder auf dein eigenes fallback.

Schnellstart

Grundlegende Verwendung

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

API-Referenz

Eigenschaften

Eigenschaft	Typ	Standard	Beschreibung
src	string	''	Bild-URL. Reaktiv: Ändern nach dem Mounten lädt das Bild neu.
alt	string	''	Alternativtext, der an das innere <img> weitergereicht wird. Leer = dekorativ.
fallback	string	eingebauter „Bild kaputt“-Data-URI	Bild, das gezeigt wird, wenn src nicht geladen werden kann.
sheet	string	''	CSS, das in das Shadow DOM der Komponente injiziert wird.

src, alt, fallback und sheet werden alle beobachtet und aktualisieren sich reaktiv: Jede Änderung an einem gemounteten Element wirkt sofort.

Bildquelle src

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

Alternativtext alt

alt wird an das innere <img> weitergereicht. Lass ihn bei dekorativen Bildern leer (der Standard), damit Screenreader sie überspringen, und beschreibe Bilder, die etwas aussagen.

<r-img src="https://picsum.photos/id/1035/240/160" alt="Ein Bergsee in der Dämmerung"></r-img>

Ladefehler fallback

Wenn src nicht geladen werden kann, wechselt die Komponente auf fallback. Ist fallback nicht gesetzt, wird ein eingebauter „Bild kaputt“-Platzhalter verwendet. Unten ist src eine ungültige URL, deshalb erscheint das Ersatzbild.

<r-img
  src="https://example.invalid/does-not-exist.png"
  fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...(Platzhalter für ein kaputtes Bild)..."
></r-img>

Externe Styles sheet

sheet injiziert rohes CSS in das Shadow DOM der Komponente. Damit gestaltest du den internen Container .ran-image oder das innere <img>.

<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>

Events

Keine. r-img löst keine eigenen Events aus.

Bewährte Praxis

• src jederzeit ändern: src ist reaktiv — es an einem gemounteten Element zu aktualisieren lädt das Bild neu; das Ersatzbild greift auch dann, wenn die neue URL fehlschlägt.
• Aussagekräftigen Bildern ein alt geben: Beschreibe den Inhalt für Screenreader; lass alt nur bei rein dekorativen Bildern leer.
• Auf das eingebaute Ersatzbild vertrauen: Der Standardplatzhalter wird automatisch verwendet — gib ein eigenes fallback nur an, wenn du einen zur Marke oder zum Kontext passenden Platzhalter willst.
• Mit sheet gestalten: Da das Bild im Shadow DOM liegt, setzt du Rahmen, Radius oder Größe über das Attribut sheet (oder die CSS-Variablen der Komponente).