Image

TSX

<Image
  src={{
    url: 'https://placehold.co/600x200/023059/ffffff?text=Hero+banner',
    width: 600,
    height: 200,
  }}
  alt="Hero banner"
  textAlign="center"
/>

TSX

<Image
  src={{
    url: 'https://placehold.co/600x200/023059/ffffff?text=Hero+banner',
    width: 600,
    height: 200,
    autoWidth: false,
    maxWidth: '100%',
  }}
  alt="Hero banner"
  action={{
    name: 'web',
    values: { href: 'https://example.com', target: '_blank' },
  }}
/>

Prop	Type	Default
src	{ url, width?, height?, autoWidth?, maxWidth? }	placeholder URL with autoWidth: true, maxWidth: "100%"
alt	string	shorthand for altText
altText	string	""
textAlign	"left" | "center" | "right"	"center"
action	{ name: "web", values: { href, target } }	empty href with target: "_blank"

A plain string src (<Image src="https://..." />) is wrapped to { url, autoWidth: true, maxWidth: "100%" } automatically at runtime, but TypeScript currently rejects the string form against ImageValues['src'], so use the object form in typed code. maxWidth accepts percentages only (e.g. "100%"). For fixed pixel sizing, set width/height instead.

Always supply alt (or altText) for accessibility.