SImage <s-image>

Zeigt ein Bild an, mit Kontrolle über Seitenverhältnis, Einpassung, Rahmen und Lazy Loading. SImage ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-image>.

import { SImage } from 'polaris-vue-elements'

Best Practices

• Scharfe, optimierte Bilder verwenden. Wählen Sie hochauflösende Bilder, die zugleich für das Web optimiert sind.
• Bilder gezielt einsetzen. Fügen Sie ein Bild nur hinzu, wenn es den Inhalt verständlicher macht oder Händlern Orientierung gibt.

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-image> (auf Englisch).

Beispiel

Das folgende Bild wird zu reinen Demozwecken von picsum.photos geladen, einem Platzhalterbild-Dienst eines Drittanbieters.

<script setup>
import { SImage } from 'polaris-vue-elements'
</script>

<template>
  <SImage
    src="https://picsum.photos/seed/polaris-image/400/300"
    alt="Placeholder scenic photo"
    aspectRatio="4/3"
    inlineSize="fill"
    objectFit="cover"
    borderRadius="200"
    style="width: 220px"
  />
</template>

Props

Prop	Typ	Beschreibung
accessibilityRole	"presentation" | "none" | "img"	Die semantische Bedeutung des Komponenteninhalts. Wenn gesetzt, wird die Rolle von Hilfstechnologien genutzt, um Benutzern die Navigation auf der Seite zu erleichtern. - none: Verbirgt das Element und seinen Inhalt vollständig vor Hilfstechnologien - presentation: Entfernt die semantische Bedeutung, sodass das Bild rein dekorativ ist und von Screenreadern ignoriert wird. - img: Kennzeichnet das Element als Bild, das Benutzern aussagekräftige Informationen vermittelt.
alt	string	Eine alternative Textbeschreibung des Bildes, damit Leser verstehen, worum es geht. Sie ist sowohl für Nutzer assistiver Technologien als auch für sehende Nutzer äußerst nützlich. Eine gut geschriebene Beschreibung ermöglicht Menschen mit Sehbehinderungen, an Nicht-Text-Inhalten teilzuhaben. Trifft ein Screenreader auf ein s-image, wird die Beschreibung laut vorgelesen. Kann ein Bild nicht geladen werden, etwa wegen einer schlechten Verbindung, wird stattdessen der alt-Text auf dem Bildschirm angezeigt. So erkennt ein sehender Käufer, dass hier ein Bild geladen werden sollte, und kann alternativ dennoch den Textinhalt erfassen. Mehr dazu unter Hinweise zum Schreiben von Alternativtexten.
aspectRatio	${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}	Das Seitenverhältnis des Bildes. Die Darstellung des Bildes hängt vom Wert von inlineSize ab: - inlineSize="fill": Das Seitenverhältnis wird eingehalten und das Bild nimmt den nötigen Platz ein. - inlineSize="auto": Das Bild wird erst gerendert, wenn es geladen ist, und das Seitenverhältnis wird ignoriert. Wird der Wert zum Beispiel auf 50 / 100 gesetzt, gibt der Getter 50 / 100 zurück. Wird er auf 0.5 gesetzt, gibt der Getter 0.5 / 1 zurück. Mehr zur Eigenschaft aspect-ratio.
border	BorderShorthand	Ein Rahmen in Kurzschreibweise, der Breite, Farbe und Stil in einer einzigen Eigenschaft festlegt.
borderColor	"subdued" | "base" | "strong"	Die Farbe des Rahmens aus der Farbskala des Designsystems. Wenn gesetzt, überschreibt sie den in der Eigenschaft border angegebenen Farbwert. subdued, base oder strong wählen, je nach gewünschter visueller Betonung.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	Die Abrundung der Ecken des Elements anhand der Radius-Skala des Designsystems. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Ecke unterschiedliche Radien festzulegen. Verwenden Sie dies für abgerundete Ecken oder vollständig abgerundete Elemente.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	Der visuelle Stil des Rahmens an allen Seiten, etwa durchgezogen, gestrichelt oder gepunktet. Wenn gesetzt, überschreibt dies den in der Eigenschaft border angegebenen Stilwert. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Seite unterschiedliche Stile festzulegen.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	Die Stärke des Rahmens an allen Seiten. Wenn gesetzt, überschreibt dies den in der Eigenschaft border angegebenen Breitenwert. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Seite unterschiedliche Breiten festzulegen.
inlineSize	"auto" | "fill"	Die angezeigte Inline-Breite des Bildes. - fill: Das Bild nimmt 100 % der verfügbaren Inline-Größe ein. - auto: Das Bild wird in seiner natürlichen Größe angezeigt. Weitere Informationen zum width-Attribut.
loading	"eager" | "lazy"	Die Ladestrategie für das Bild. - eager: Lädt das Bild sofort, unabhängig von seiner Position im sichtbaren Viewport. - lazy: Verzögert das Laden des Bildes, bis es sich dem Viewport bis auf einen bestimmten Abstand nähert. Weitere Informationen zum loading-Attribut.
objectFit	"contain" | "cover"	Das Verhalten beim Skalieren des Bildes, damit es in seinen Container passt. - contain: Skaliert das Bild so, dass es unter Beibehaltung des Seitenverhältnisses in den Container passt. Das gesamte Bild ist sichtbar, es kann aber Leerraum bleiben. - cover: Skaliert das Bild so, dass es unter Beibehaltung des Seitenverhältnisses den gesamten Container ausfüllt. Das Bild wird dabei eventuell beschnitten. Das Bild wird immer in der Mitte des Containers positioniert. Weitere Informationen zur object-fit-Eigenschaft.
sizes	string	Eine Menge von Media Conditions und ihren zugehörigen Größen.
src	string	Die Bildquelle (entweder eine Remote-URL oder eine lokale Dateiressource). Während das Bild lädt oder wenn kein src angegeben ist, wird ein Platzhalter gerendert.
srcSet	string	Eine Menge von Bildquellen mit ihren Breiten- oder Pixeldichte-Deskriptoren. Überschreibt die Eigenschaft src.

Events

Event	Typ
error	CustomEvent
load	CustomEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @error auf <SImage>.