Composant · Structure

DataImage

Documenté

DataImage est l’équivalent piloté par props/état de MediaContent : une <img> contrôlée (src, alt requis, object-fit, dimensions, rayon), en chargement paresseux.

Présentation

DataImage

Voir le code (Svelte)

<DataImage
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Crect width='360' height='240' fill='%23eef2f7'/%3E%3Cpath d='M42 174h276L250 91l-54 63-37-43z' fill='%234e79a7'/%3E%3Ccircle cx='108' cy='82' r='24' fill='%23f28e2b'/%3E%3C/svg%3E"
  alt="Aperçu de graphique produit"
  width={320}
  height={200}
  fit="cover"
  radius={8}
/>

API

Prop	Type	Par défaut	Effet
`src`	`string`	obligatoire	URL de l’image.
`alt`	`string`	obligatoire	Texte alternatif (a11y). `""` = image décorative.
`fit`	`"cover" \| "contain"`	`"cover"`	Comportement `object-fit` dans la boîte.
`width` / `height`	`number \| string`	non défini	Dimensions (nombre → px, ou longueur CSS).
`radius`	`number \| string`	non défini	Rayon de bordure (longueur CSS).
`loading`	`"lazy" \| "eager"`	`"lazy"`	Stratégie de chargement de l’image.
`decoding`	`"async" \| "sync" \| "auto"`	`"async"`	Indice de décodage transmis au navigateur.

Accessibilité

Le alt est obligatoire ; le passer à "" marque l’image comme décorative.
loading="lazy" et decoding="async" par défaut.