Preview

Installation

npx sigma-ui@latest add image

Usage

<script setup lang="ts">
import { Image } from '@/components/ui/image';
</script>

<template>
  <Image
    src="/photo.jpg"
    alt="A mountain lake"
  />
</template>

• alt is the accessible name. It defaults to image, so set a real description for meaningful photos.
• glow adds a soft glow behind the image.
• shape is rounded or circle.
• The fallback slot replaces the default placeholder when the image fails to load.

Examples

Basic

Glow

Custom fallback

API Reference

Image

Props

Prop	Type	Default
src Image URL; the fallback is shown when it is empty or fails to load.	string	-
alt Alternative text for the image.	string	"image"
glow Renders a blurred, saturated copy of the image behind it as a glow effect.	boolean	-
shape Corner style of the image.	"circle" | "rounded" | null	"rounded"

Events

Event	Payload
error Emitted when the image fails to load.	[]
load Emitted when the image finishes loading.	[]

Slots

Slot	Scope
fallback Replaces the default "no photo" placeholder shown when the image is missing or fails to load.	-

Accessibility

The image is announced with its alt text. Leave alt empty only when the image is decorative, and give meaningful images a description. The fallback is shown when the file fails to load.

Key	Description
Tab	Moves focus past the image. The image itself is not interactive.