Components

Image

Image is a view that displays an image. Use Image to display images from various sources, including bundled images, system images, and images from URLs.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<Image src="https://via.placeholder.com/200x200" alt="Placeholder image"></Image>

With Alt Text

Preview unavailable for this example in the static docs build.

Show code

<Image src="https://via.placeholder.com/300x200" alt="A sample image"></Image>

Custom Styling

Preview unavailable for this example in the static docs build.

Show code

<Image src="https://via.placeholder.com/250x250" alt="Styled image" style={{
      borderRadius: '8px',
      border: '2px solid #007AFF'
    }}></Image>

In HStack

Preview unavailable for this example in the static docs build.

Show code

<HStack spacing={10}>
      <Text>Left</Text>
      <Image src="https://via.placeholder.com/100x100" alt="Image" />
      <Text>Right</Text>
    </HStack>

In VStack

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={10}>
      <Text>Above</Text>
      <Image src="https://via.placeholder.com/200x150" alt="Image" />
      <Text>Below</Text>
    </VStack>

In ZStack

Preview unavailable for this example in the static docs build.

Show code

<ZStack style={{ width: '300px', height: '200px' }}>
      <Image src="https://via.placeholder.com/300x200" alt="Background" />
      <Text style={{ color: 'white', textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}>
        Overlay Text
      </Text>
    </ZStack>

Responsive Images

Preview unavailable for this example in the static docs build.

Show code

<Image src="https://via.placeholder.com/400x300" alt="Responsive image" style={{
      maxWidth: '100%',
      height: 'auto'
    }}></Image>

Multiple Images

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={15}>
      <Image src="https://via.placeholder.com/200x150" alt="Image 1" />
      <Image src="https://via.placeholder.com/200x150" alt="Image 2" />
      <Image src="https://via.placeholder.com/200x150" alt="Image 3" />
    </VStack>

API

This component currently relies on inherited element props.

Inherits additional props from Omit<IBaseElementComponent<'img'>, 'children'> & { /** * View transition name for shared element transitions */ viewTransitionName?: string }.

Overview

Image is a view that displays an image. Use Image to display images from various sources, including bundled images, system images, and images from URLs.

SwiftUI Correspondence: Similar to SwiftUI's Image.

With Alt Text

Always provide alt text for accessibility:

Responsive Images

Make images responsive to container size:

Notes

Always provide alt text for accessibility
Images support all standard HTML img attributes
Use style prop for custom styling (borderRadius, border, etc.)
For responsive images, use maxWidth: '100%' and height: 'auto'
Images can be used in any layout component (HStack, VStack, ZStack, etc.)

Best Practices

Alt text: Always provide descriptive alt text for screen readers
Responsive: Make images responsive for different screen sizes
Loading: Consider lazy loading for images below the fold
Optimization: Optimize image sizes for web performance
Placeholders: Use placeholders or loading states for async image loading

HStack

HStack is a view that arranges its children in a horizontal line. An HStack is a container view that arranges its child views in a horizontal line. You can customize the spacing between views and the alignment of views within the stack.

Inspector

Inspector presents supplemental controls or contextual details beside primary content.

Image

Examples

API

Overview

With Alt Text

Custom Styling

Responsive Images

Notes

Best Practices

On this page