Image Display Examples

Display images with configurable fit, positioning, and captions.

Type Interface

/**
 * Image Type Interfaces
 */

import type { BaseChartProps } from '../../types';

export interface ImageProps extends BaseChartProps {
  src: string;
  alt?: string;
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  position?: string;
  caption?: string;
  loading?: 'lazy' | 'eager';
  onLoad?: () => void;
  onError?: () => void;
}

Contain (Default)

Loading...

Image with contain fit - maintains aspect ratio

import { Image } from '@vuer-ai/vuer-viz';

export default function ContainExample() {
  return (
    <Image
      src="https://picsum.photos/400/300"
      alt="Sample image"
      fit="contain"
      caption="Image with contain fit - maintains aspect ratio"
    />
  );
}

Cover

Loading...

Image with cover fit - fills entire area

import { Image } from '@vuer-ai/vuer-viz';

export default function CoverExample() {
  return (
    <Image
      src="https://picsum.photos/400/300"
      alt="Sample image"
      fit="cover"
      caption="Image with cover fit - fills entire area"
    />
  );
}

Features

• Configurable object-fit: contain, cover, fill, none, scale-down
• Custom positioning support
• Optional captions
• Lazy loading support
• Error handling with fallback display
• Loading state indicator

← Back to all charts