Components

AsyncImage

AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's AsyncImage mental model.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { AsyncImage } from '@swiftuijs/ui';
export default function Example() {
    return (<AsyncImage src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27 viewBox=%270 0 320 180%27%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%2377b7df%27/%3E%3Cpath d=%27M0 180 100 65 165 130 235 45 320 180%27 fill=%27%23286356%27/%3E%3Ccircle cx=%2768%27 cy=%2740%27 r=%2716%27 fill=%27%23ffdc80%27/%3E%3C/svg%3E" alt="Remote image" placeholder="Loading image…"></AsyncImage>);
}

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:

Usage and limitations

  • Use placeholder for loading UI.
  • Use fallback for failed requests.
  • An empty src is treated as a failure state immediately.
  • AsyncImage resets back to the loading phase whenever src changes.

More examples

Missing Source
Phase Updates

API reference

PropTypeRequiredDescription
placeholderReactNodeNoPlaceholder content shown while the image is loading.
fallbackReactNodeNoFallback content shown when loading fails.
onPhaseChange(phase: 'loading' | 'success' | 'failure') => voidNoEmits the current async loading phase.

Inherits additional props from Omit<IBaseElementComponent<'img'>, 'children'>.

Edit this page on GitHubReport an issue

AspectRatio

Constrains content to a target ratio, aligned with SwiftUI's aspectRatio modifier.

Badge

Display a short count or status beside related content.