ScalarScalar API

Images

Images display visual content with support for light/dark mode variants, clickable links, and responsive sizing. They're perfect for showcasing screenshots, diagrams, charts, or any visual content that enhances your documentation. Each image can include a caption and supports multiple display modes.

PropertiesCopied!

src string requiredCopied!

The primary image source URL. This is the image that will be displayed in light mode or as the fallback.

activeSrcCopied!

string optional

An alternative image source that takes precedence over src. Useful for dynamic image switching or when you need to override the primary source.

darkModeSrcCopied!

string optional

A separate image source for dark mode. When provided, this image will be displayed when the user's theme is set to dark mode.

widthCopied!

number optional

The width of the image in pixels. When specified, the image size will automatically be set to custom.

heightCopied!

number optional

The height of the image in pixels. When specified, the image size will automatically be set to custom.

altCopied!

string optional

Alternative text for accessibility. This describes the image for screen readers and other assistive technologies.

captionCopied!

string optional

A descriptive caption for the image. This appears below the image and provides context or explanation.

hrefCopied!

string optional

A URL that the image links to. When provided, the image becomes clickable and opens the link in a new tab.

sizeCopied!

'actual' | 'custom' | 'full' optional

The display size of the image:

  • actual: Shows the image at its natural size
  • custom: Uses custom width/height dimensions
  • full: Makes the image full width

Defaults to actual.

ExamplesCopied!

Basic ImageCopied!

Application screenshot
<scalar-image
  src="https://avatars.githubusercontent.com/u/6176314?v=4"
  alt="Application screenshot">
</scalar-image>

Image with CaptionCopied!

System architecture diagram
High-level system architecture showing data flow
<scalar-image
  src="https://avatars.githubusercontent.com/u/6176314?v=4"
  alt="System architecture diagram"
  caption="High-level system architecture showing data flow">
</scalar-image>

Clickable ImageCopied!

Click to view full size
Click to view full resolution
<scalar-image
  src="https://avatars.githubusercontent.com/u/301879?s=200&v=4"
  alt="Click to view full size"
  href="https://github.com/scalar/scalar"
  caption="Click to view full resolution">
</scalar-image>

Custom Sized ImageCopied!

Company logo
Company branding
<scalar-image
  src="https://avatars.githubusercontent.com/u/301879?s=200&v=4"
  alt="Company logo"
  width="200"
  height="100"
  caption="Company branding">
</scalar-image>

Dark Mode ImageCopied!

Theme-aware illustration
Automatically adapts to user's theme preference
<scalar-image
  src="https://avatars.githubusercontent.com/u/301879?s=200&v=4"
  darkModeSrc="https://avatars.githubusercontent.com/u/301879?s=200&v=4"
  alt="Theme-aware illustration"
  caption="Automatically adapts to user's theme preference">
</scalar-image>

Full Width ImageCopied!

Hero section background
Full-width hero image
<scalar-image
  src="https://pbs.twimg.com/profile_banners/1599772885857538051/1740351609/1500x500"
  alt="Hero section background"
  size="full"
  caption="Full-width hero image">
</scalar-image>