# 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; clears the attribute again once a later `src` loads successfully.

```ts
import { imageFallback } from "@sdxc/ui/mixins";
```

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

```ts
imageFallback(): MixinDescriptor<HTMLImageElement>
```

Returns: A mixin descriptor for an Avatar or Logo image's `mix` prop.

## Examples

```tsx
<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.

#### Signature

```ts
new ImageFallbackEvent(fallback: boolean)
```

#### Properties

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

#### Signature

```ts
const IMAGE_ERROR_ATTRIBUTE = "data-image-error"
```