Skip to main content

Image

Embeds an image within the interface and controls its presentation. Use to visually illustrate concepts, showcase products, or support user tasks and interactions.

Anchor to propertiesProperties

Anchor to inlineSize
inlineSize
'fill' | 'auto'
Default: 'fill'

The displayed inline width of the image.

  • fill: the image will takes up 100% of the available inline size.
  • auto: the image will be displayed at its natural size.

Mobile surfaces: Always wrap your image in a box with a set width and height. ScrollViews on mobile have a dynamic height, which can cause images to appear inconsistently without defined dimensions.

Anchor to objectFit
objectFit
'contain' | 'cover'
Default: 'contain'

Determines how the content of the image is resized to fit its container. The image is positioned in the center of the container.

Anchor to src
src
string

The image source (either a remote URL or a local file resource).

When the image is loading or no src is provided, a placeholder will be rendered.

Was this section helpful?

Code

<s-image src="example.png" inlineSize="auto"></s-image>

Preview