Image

An image component with built-in support for aspect ratio, object-fit, and border radius options.

Anatomy

<script>
  import { Image } from "@saas-ui/svelte/components/image";
</script>

<Image
  src="https://example.com/image.jpg"
  alt="Description"
  width="300"
  height="200"
  rounded="md"
  fit="cover"
  aspectRatio="16/9"
/>

Examples

Aspect Ratio Accessibility

Image with a specific aspectRatio.

<Image
	src="https://picsum.photos/seed/aspect/800/600"
	alt="Image with aspect ratio"
	aspectRatio="4/3"
	width="300px"
	rounded="md"
/>

Basic Accessibility

Basic image with default styling.

<Image
	src="https://picsum.photos/seed/saas/800/600"
	alt="Sample image"
	rounded="md"
	fit="cover"
/>

Circular Accessibility

Circular image using rounded="full".

<Image
	src="https://picsum.photos/seed/circular/400/400"
	alt="Circular image"
	width={150}
	height={150}
	rounded="full"
	fit="cover"
/>

Height Accessibility

Image with a fixed height.

<Image
	src="https://picsum.photos/seed/height/800/400"
	alt="Image with fixed height"
	height="200px"
	rounded="md"
/>

Object Fit Accessibility

Different fit options.

<Stack gap={6} class="flex-row flex-wrap items-start">
	{#each imageFitOptions as fit}
		<VStack gap={2} class="items-center">
			<Text size="xs">{fit}</Text>
			<Image
				src="https://picsum.photos/seed/fit/400/300"
				alt={`Image with ${fit} fit`}
				{fit}
				width={200}
				height={150}
				rounded="md"
				class="border-border-subtle border"
			/>
		</VStack>
	{/each}
</Stack>

Rounded Accessibility

Different rounded options.

<Stack gap={6} class="flex-row flex-wrap items-start">
	{#each imageRoundedOptions as rounded}
		<VStack gap={2} class="items-center">
			<Text size="xs">{rounded}</Text>
			<Image
				src="https://picsum.photos/seed/rounded/200/200"
				alt={`Image with ${rounded} border radius`}
				{rounded}
				width={100}
				height={100}
			/>
		</VStack>
	{/each}
</Stack>

Props

Prop	Type	Default	Description
`src`	`text`	-	The image source URL.
`alt`	`text`	-	Alternative text for the image.
`width`	`text`	-	The width of the image (CSS value or number for pixels).
`height`	`text`	-	The height of the image (CSS value or number for pixels).
`aspectRatio`	`text`	-	The aspect ratio of the image (e.g., 16/9, 4/3, 1).
`rounded`	`none \| sm \| md \| lg \| xl \| 2xl \| 3xl \| full`	`none`	The border radius of the image.
`fit`	`contain \| cover \| fill \| none \| scale-down`	`cover`	The object-fit property of the image.
`class`	`text`	-	Additional CSS classes to apply.