Image

Image — the responsive-image primitive.

Takes the whole slot value; url, alt, mobile and responsive are read off it, so a call site cannot unpack four fields and forget the fifth. A raw <img> is legal where you do not want this machinery — the component is worth using, not mandatory.

Two kinds of image. value takes either a resolved slot value (the user’s own photo) or an AuthorImage — a raster the template ships, from import photo from "./assets/photo.jpg". Both get the same <picture>/srcset treatment; the only difference at the call site is that an AuthorImage REQUIRES the alt prop, having no alt of its own to fall back on.

Framed (default): a wrapper carries the aspect box from frame, renders a neutral rect when the value is absent, and absolutely-positions the <img>. Cropping is baked upstream — the platform delivers a pre-cropped asset — so the image is simply centered. The box is frame.desktop.aspect, switching to frame.mobile.aspect below frame.breakpoint when declared and not nominal — see frame-box.ts.

Unframed (frame={false}): no frame wrapper and no aspect box — the layout box is the parent’s, for a logo or a slide whose parent already establishes it. Pair with fit="contain" where the aspect differs. An absent value renders a placeholder box here too — never an <img> with an empty src.

Do not write markup or browser-side code against a particular rendered root. Framed, the root is always the wrapper. Unframed, it is the <img> itself, the placeholder box for a blank value, or a generated <picture> — which is emitted only when the source plan produced a <source> to put in it.

Committing to a rendition. Two elements at different DOM positions rendering the SAME slot value (a mobile card and a desktop aside) cannot share one <picture> — rendition="mobile" on the one that must render the mobile crop resolves the value to it before anything else runs, so that element’s whole output is that one rendition.

The marker is never dropped. {...slot.x} arrives through the prop bag and every branch applies it — the framed wrapper, the unframed <img>, or the empty-state placeholder box that renders no <img> at all. It does NOT always ride the branch’s outermost element: an unframed value that generates a <picture> keeps the marker on the <img> inside it. Find it by querying the rendered markup for the attribute rather than by reading any one element’s attributes.

Import from @homepages/template-kit.

Signature

function Image(props: Props): ReactNode

Parameters

Name	Type	Required	Description
`{
value,
alt,
frame,
fit,
sizes,
maxRungWidth,
mobileBreakpoint: mobileBreakpointProp,
rendition,
className,
loading,
style,
…rest
}`	Props	required

Returns

ReactNode

See also

• Every public export of the kit