AsyncImage
AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's `AsyncImage` mental model.
AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's `AsyncImage` mental model.
Examples
Default
Preview unavailable for this example in the static docs build.
Show code
<AsyncImage src="https://via.placeholder.com/320x180" alt="Remote image" placeholder="Loading image…"></AsyncImage>Missing Source
Preview unavailable for this example in the static docs build.
Show code
<AsyncImage src="" alt="Missing image" fallback="Image unavailable"></AsyncImage>Phase Updates
Preview unavailable for this example in the static docs build.
Show code
function PhaseAwareDemo() {
const [phase, setPhase] = useState('loading')
return (
<div style={{ display: 'grid', gap: 12 }}>
<AsyncImage
src="https://via.placeholder.com/320x180"
alt="Phase aware image"
placeholder="Loading image…"
onPhaseChange={setPhase}
/>
<div>Current phase: {phase}</div>
</div>
)
}API
| Prop | Type | Required | Description |
|---|---|---|---|
placeholder | ReactNode | No | Placeholder content shown while the image is loading. |
fallback | ReactNode | No | Fallback content shown when loading fails. |
onPhaseChange | (phase: 'loading' | 'success' | 'failure') => void | No | Emits the current async loading phase. |
Inherits additional props from Omit<IBaseElementComponent<'img'>, 'children'>.
Overview
AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's AsyncImage mental model.
Missing Source
When src is empty, AsyncImage now enters the failure phase immediately instead of attempting a broken browser request:
Phase Updates
Use onPhaseChange when the surrounding UI needs to react to loading, success, or failure:
Notes
- Use
placeholderfor loading UI. - Use
fallbackfor failed requests. - An empty
srcis treated as a failure state immediately. AsyncImageresets back to the loading phase wheneversrcchanges.