Components

Image

Display an image using a native HTML img element.

Example

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

Default

Loading preview…

Code
'use client';
import { Image } from '@swiftuijs/ui';
export default function Example() {
    return (<Image 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="Placeholder image"></Image>);
}

Usage and limitations

  • Supply src and descriptive alt text; use alt="" for decorative images. Native HTML image attributes are supported.
  • Asset URLs work; native SF Symbols and Apple asset catalogs are not resolved by this component.
  • For responsive images, use maxWidth: '100%' and height: 'auto'; set dimensions to reduce layout shifts.
  • Use loading="lazy" below the fold and appropriately sized images. Use AsyncImage for explicit loading and failure placeholders.
  • viewTransitionName names the element for browser shared-element transitions; source and destination names must match.

More examples

With Alt Text
Custom Styling
In HStack
In VStack
In ZStack
Responsive Images
Multiple Images

API reference

PropTypeRequiredDescription
viewTransitionNamestringNoView transition name for shared element transitions

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

Edit this page on GitHubReport an issue

HStack

Arrange children in a horizontal row with configurable spacing and vertical alignment.

Inspector

Inspector presents supplemental controls or contextual details beside primary content.