Images

Images render responsive figures with optional captions, links, and dark-mode variants.

The examples below reference images from your assets directory using root-relative paths (e.g. /marc-cam-scalar.jpg). You can also pass a full URL to any external image.

Properties

Prop	Type	Default	Description
`src`	`string`	required	URL or path to the image. See Image paths.
`src-dark`	`string`	—	Dark-mode variant of `src`. Falls back to `src` when not set.
`alt`	`string`	—	Alt text for accessibility.
`caption`	`string`	—	Caption shown below the image.
`width`	`number`	—	Display width in pixels.
`height`	`number`	—	Display height in pixels.
`href`	`string`	—	When set, wraps the image in a link to this URL.
`size`	`'actual'` `'custom'` `'full'`	`actual`	Sizing strategy. `actual` uses the image's natural size, `custom` uses `width`/`height`, `full` stretches to container width.

Image paths

A path that starts with / points at a file in your assetsDir. /logo.png serves assets/logo.png.
Any other path is relative to the page file.
A full URL loads the image from that address.

If the file does not exist, the publish still succeeds, but the build log warns that the asset was not copied and the image does not load.

Examples

Basic Image

Two Scalar team members working at a desk

<scalar-image
  src="/marc-cam-scalar.jpg"
  alt="Two Scalar team members working at a desk">
</scalar-image>

<Image
  src="/marc-cam-scalar.jpg"
  alt="Two Scalar team members working at a desk"
/>

With a Caption

<scalar-image
  src="/marc-cam-scalar.jpg"
  alt="Two Scalar team members working at a desk"
  caption="Hard at work at Scalar">
</scalar-image>

<Image
  src="/marc-cam-scalar.jpg"
  alt="Two Scalar team members working at a desk"
  caption="Hard at work at Scalar"
/>

Light and Dark Variants

<scalar-image
  src="/brand/scalar-wordmark-light.png"
  src-dark="/brand/scalar-wordmark-dark.png"
  alt="Scalar wordmark"
  size="custom"
  width="300">
</scalar-image>

<Image
  src="/brand/scalar-wordmark-light.png"
  src-dark="/brand/scalar-wordmark-dark.png"
  alt="Scalar wordmark"
  size="custom"
  width={300}
/>

Clickable Image

<scalar-image
  src="/marc-cam-scalar.jpg"
  alt="Visit Scalar"
  href="https://scalar.com">
</scalar-image>

<Image
  src="/marc-cam-scalar.jpg"
  alt="Visit Scalar"
  href="https://scalar.com"
/>

Code Blocks

Icons

The API company.