Image

Image component with optional fallback support.

Import

import { Image } from '@tidbcloud/uikit'

Basic Usage

Image is a wrapper for img with minimal styles. By default, it takes 100% of parent width.

import { Image } from '@tidbcloud/uikit'
 
function Demo() {
  return <Image radius="md" src="https://example.com/image.png" />
}

Image Height

Set image height to prevent layout jumps during loading:

import { Image } from '@tidbcloud/uikit'
 
function Demo() {
  return <Image radius="md" h={200} src="https://example.com/image.png" />
}

Image Fit

By default, images use object-fit: cover. Use fit="contain" with w="auto" for different behavior:

import { Image } from '@tidbcloud/uikit'
 
function Demo() {
  return <Image radius="md" h={200} w="auto" fit="contain" src="https://example.com/image.png" />
}

Fallback Image

Display a fallback when the image fails to load:

import { Image } from '@tidbcloud/uikit'
 
function Demo() {
  return <Image radius="md" src={null} h={200} fallbackSrc="https://placehold.co/600x400?text=Placeholder" />
}

Usage with Next.js Image

Image is polymorphic and can be used with next/image:

import NextImage from 'next/image'
import { Image } from '@tidbcloud/uikit'
import myImage from './my-image.jpg'
 
function Demo() {
  return <Image component={NextImage} src={myImage} alt="My image" />
}

Key Props

Prop	Type	Description
`src`	`string`	Image URL
`fallbackSrc`	`string`	Fallback URL if image fails to load
`fit`	`ObjectFit`	Controls `object-fit` style
`radius`	`MantineRadius`	Border radius
`h`	`number \| string`	Image height
`w`	`number \| string`	Image width
`onError`	`function`	Called when image fails to load

Hueslider Indicator