[ @sdxc/ui/mixins ]
imageFallback
Flags an Avatar or Logo image the moment it fails to load by setting an attribute its own styling hides behind, revealing the fallback markup stacked beneath it.
import { imageFallback } from "@sdxc/ui/mixins";Usage
Sets or clears IMAGE_ERROR_ATTRIBUTE on an Avatar or Logo image
on load, error, and mount — mount also checks complete/naturalWidth
since an already-cached image never fires either event again.
Signature
imageFallback(): MixinDescriptor<HTMLImageElement>Returns a mixin descriptor for an Avatar or Logo image's mix prop.
Examples
<div mix={[css({ position: "relative", display: "inline-grid" })]}>
<span mix={[css({ gridArea: "1 / 1" })]}>{initials}</span>
<img
src={avatarUrl}
alt={name}
mix={[
imageFallback(),
css({ gridArea: "1 / 1", "&[data-image-error]": { display: "none" } }),
]}
/>
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
ImageFallbackEvent
Dispatched on an Avatar or Logo image by imageFallback whenever loading it succeeds or fails, so a consumer can react without polling IMAGE_ERROR_ATTRIBUTE off the DOM itself.
new ImageFallbackEvent(fallback: boolean)| Property | Type | Description |
|---|---|---|
fallback | readonly boolean | true once the image has failed to load and its fallback is now revealed, false once it loads successfully. |
IMAGE_ERROR_ATTRIBUTE
Attribute imageFallback sets on its host image once it fails to
load, and removes once a later src loads successfully; the image's own
css() styling hides itself behind this attribute to reveal its fallback.
const IMAGE_ERROR_ATTRIBUTE = "data-image-error"