Image
An image that shows something sensible when the source cannot be loaded. Swap in your own content, a second URL, or a neutral placeholder icon, and keep the accessible name either way.
Image or Avatar?
BbAvatarImage / BbAvatarFallback pair.
BbImage is the general-purpose one: a product photo, a thumbnail, a chart rendered as a picture.
Basic
<img> with a dead URL leaves a broken-icon box and the alt text, which reads as a bug in the page
rather than missing data. With no Fallback and no FallbackSrc, a muted box holding an
"image-off" icon renders instead.
Fallback Content
Fallback fragment wins over FallbackSrc. Class lands on the image
and on the fallback box, so a fixed size or a border radius survives the swap. The fallback also
centres whatever it is given and adds a muted background.
Second URL
FallbackSrc is a second URL to try. It renders as a plain <img> with no error handler,
so a broken pair cannot loop between the two.
Fit
None is the default and applies no object-fit at all.
Cover is the usual choice for a fixed-size thumbnail.
Events
OnError lets a failure be logged or reported rather than only drawn. While loading, the
<img> carries data-state="loading"; once loaded, data-state="loaded".
A FallbackSrc image carries data-state="fallback".
Lazy Loading
loading="lazy". Turn Lazy off for anything above the fold,
where lazy loading delays the largest paint rather than helping it. A decorative image passes an empty Alt,
which hides it from assistive technology.
Behaviour
Fallback precedence. Fallback wins over FallbackSrc.
With neither, a neutral placeholder renders: a muted box holding the "image-off" icon.
The fallback is not retried. A FallbackSrc image has no error handler of its own,
so a missing pair cannot loop between the two sources.
The fallback keeps the accessible name. Both the Fallback fragment and the default
placeholder render inside a <div> carrying role="img" and an aria-label set to Alt, so the description survives the swap.
A new Src resets the state. When Src changes, the failed and loaded flags clear and the image
is attempted again. Without that, a list reusing one component instance across rows would keep showing the first row's failure.
AdditionalAttributes does not reach the fallback box. It is applied to the <img> in
both the normal and the FallbackSrc case, but not to the fallback <div>.
The image always sets decoding="async".