You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
895 B
35 lines
895 B
<script lang="ts">
|
|
/**
|
|
* Eidos `<Image.Error>` — rendered when the parent Image reports
|
|
* `error` status (image failed to load). `role="img"` + a
|
|
* translated `aria-label` so screen readers know it's a broken
|
|
* image, not arbitrary chrome.
|
|
*/
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import { IMAGE_LANGS } from './langs';
|
|
import type { ImageErrorProps } from './types';
|
|
import { getImageEidosContext } from './image-context';
|
|
|
|
let {
|
|
'aria-label': ariaLabel,
|
|
children,
|
|
...rest
|
|
}: ImageErrorProps = $props();
|
|
|
|
const image = getImageEidosContext();
|
|
const eidos = ActiveEidos.require();
|
|
const resolvedLabel = $derived(ariaLabel ?? eidos.langs.ts(IMAGE_LANGS.ERROR_LABEL));
|
|
</script>
|
|
|
|
{#if image?.status === 'error'}
|
|
<span
|
|
{...rest}
|
|
data-image-error=""
|
|
{...image.fallbackAttrs}
|
|
role="img"
|
|
aria-label={resolvedLabel}
|
|
>
|
|
{@render children?.()}
|
|
</span>
|
|
{/if}
|