Image(props: ImageProps): Image;
ImageProps type is a union requiring exactly one image source, plus an optional contentMode:
type ImageProps = { contentMode?: "fit" | "fill" } &
({ name: string } | { systemName: string } | { url: string } | { image: string } | { svg: string });
How the image should be scaled to fit its container.
Name of an image asset in the app bundle.
Name of a system-provided symbol (SF Symbols on iOS).
URL of a remote image to load.
Base64-encoded image data.
Inline SVG markup as a string.
Support
Methods
The Image component returns an extended Image interface with image-specific chainable methods in addition to the standard Component modifiers.
.resizable()
Makes the image resizable so it fills its frame. Required for .frame() to affect image size.
Image({ url: "https://example.com/photo.jpg" })
.resizable()
.frame({ width: 200, height: 200 })
.renderingMode(mode)
Controls how the image is rendered.
"original" — preserves the image’s original colors."template" — renders as a single color using the current foreground style.
Image({ systemName: "heart.fill" })
.renderingMode("template")
.foregroundStyle(Color("red"))
.interpolation(quality)
Sets the interpolation quality for scaled images. Values: "none", "low", "medium", "high".
Image({ name: "pixel-art" })
.resizable()
.interpolation("none")
.frame({ width: 200, height: 200 })
.antialiased(isAntialiased?)
Enables or disables antialiasing on image edges. Defaults to true if called without arguments.
Image({ name: "icon" })
.resizable()
.antialiased(false)
.symbolRenderingMode(mode)
Sets how multi-layer system symbols are rendered. Values: "monochrome", "hierarchical", "palette", "multicolor".
Image({ systemName: "cloud.sun.rain.fill" })
.symbolRenderingMode("multicolor")
.imageScale(scale)
Sets the symbol scale relative to adjacent text. Values: "small", "medium", "large".
Image({ systemName: "star.fill" })
.imageScale("large")
.foregroundStyle(Color("yellow"))
Usage
Image from URL
Image({ url: "https://example.com/photo.jpg" })
.resizable()
.scaledToFit()
.frame({ height: 200 })
System symbol
Image({ systemName: "star.fill" })
.foregroundStyle(Color("yellow"))
Asset image
Image({ name: "hero-image" })
.resizable()
.scaledToFill()
.frame({ width: 300, height: 200 })
.clipped()
Inline SVG
Image({ svg: "<svg viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='blue'/></svg>" })
.resizable()
.frame({ width: 100, height: 100 })
Template rendering with foreground color
Image({ systemName: "envelope.fill" })
.renderingMode("template")
.imageScale("large")
.foregroundStyle(Color("blue"))
See Also
