HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ImageView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA picture that says whether it arrived.ExperimentalSince 0.1.0MediaUsageimport'@fusion.dev/helix/image'import'@fusion.dev/helix-headless/image'Preview
API ReferenceRoothelix-imageA picture that says whether it arrived.
PropTypeDefaultDescriptionaltstring""What it shows, for a reader who cannot see it.crossOrigin"anonymous"|"use-credentials"|nullnullHow the picture is fetched across origins, which decides whether a canvas
can read it.decoding"async"|"auto"|"sync""async"Whether the browser may decode off the main thread.fetchPriority"auto"|"high"|"low""auto"How urgently to fetch it, for the one picture that is the page.loading"eager"|"lazy"Whether to wait until it is nearly on screen.referrerPolicystring""How much of the referring URL to send with the request.roundedbooleanfalseWhether the corners are cut.sizesstring""How much of the line it will take, passed through to the picture.srcstring""Where the picture is.srcsetstring""The candidate widths, passed through to the picture.status"error"|"loaded"|"loading""loading"Whether the picture is on its way, here, or never coming.
ReadTypeDescriptioncompletebooleanWhether the picture has finished arriving, however it went.currentSrcstringWhich candidate the browser actually chose out of `srcset`.naturalHeightnumberThe picture's own height in pixels, and zero until it has arrived.naturalWidthnumberThe picture's own width in pixels, and zero until it has arrived.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfallbackShown instead of it, if it never does.placeholderShown until the picture arrives.
EventTypeDescriptionerrorEventRelayed for the same reason.loadEventRelayed, because the platform's own does not escape.
PartDescriptionfallbackWhat stands in when it fails.imageThe picture itself.placeholderWhat stands in until it arrives.
CSS PropertyDescription--image-aspectThe ratio of the box, as `16 / 9`.--image-fitHow the picture fills it.--image-placeholder-colorThe resting surface behind both stand-ins.--image-positionWhich part survives a crop.--image-radiusCorner radius, under `rounded`.
Roothelix-headless-imageA picture that says whether it arrived.
PropTypeDefaultDescriptionaltstring""What it shows, for a reader who cannot see it.crossOrigin"anonymous"|"use-credentials"|nullnullHow the picture is fetched across origins, which decides whether a canvas
can read it.decoding"async"|"auto"|"sync""async"Whether the browser may decode off the main thread.fetchPriority"auto"|"high"|"low""auto"How urgently to fetch it, for the one picture that is the page.loading"eager"|"lazy"Whether to wait until it is nearly on screen.referrerPolicystring""How much of the referring URL to send with the request.sizesstring""How much of the line it will take, passed through to the picture.srcstring""Where the picture is.srcsetstring""The candidate widths, passed through to the picture.status"error"|"loaded"|"loading""loading"Whether the picture is on its way, here, or never coming.
ReadTypeDescriptioncompletebooleanWhether the picture has finished arriving, however it went.currentSrcstringWhich candidate the browser actually chose out of `srcset`.naturalHeightnumberThe picture's own height in pixels, and zero until it has arrived.naturalWidthnumberThe picture's own width in pixels, and zero until it has arrived.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfallbackShown instead of it, if it never does.placeholderShown until the picture arrives.
EventTypeDescriptionerrorEventRelayed for the same reason.loadEventRelayed, because the platform's own does not escape.
PartDescriptionfallbackWhat stands in when it fails.imageThe picture itself.placeholderWhat stands in until it arrives.
ExamplesNameDescriptionEventsLoad and error under the platform's own names, which is what a fallback needs.FallbackA picture that never arrives says so, rather than leaving a hole.PlaceholderAnything can stand in while a picture is on its way, or before it has one. A source that arrives with the data is the common case, and the stand-in is what holds the ground until it does.PreviewA picture with an aspect ratio held and its corners rounded.PreviewA picture with an aspect ratio held and its corners rounded.ResponsiveThe candidate widths a browser chooses from, and the one picture worth fetching first.