@mantine/core/lib/src/components/Image/Image.d.ts

React components library focused on usability, accessibility and developer experience

import React from 'react';
import { DefaultProps, MantineNumberSize } from '../../theme';
import useStyles from './Image.styles';
export declare type ImageStylesNames = keyof ReturnType<typeof useStyles>;
export interface ImageProps extends DefaultProps<ImageStylesNames>, Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {
    /** Image src */
    src?: string;
    /** Image alt text, used as title for placeholder if image was not loaded */
    alt?: string;
    /** Image object-fit property */
    fit?: 'contain' | 'cover';
    /** Image width, defaults to 100%, cannot exceed 100% */
    width?: number | string;
    /** Image height, defaults to original image height adjusted to given width */
    height?: number | string;
    /** Predefined border-radius value from theme.radius or number for border-radius in px */
    radius?: MantineNumberSize;
    /** Enable placeholder when image is loading and when image fails to load */
    withPlaceholder?: boolean;
    /** Customize placeholder content */
    placeholder?: React.ReactNode;
    /** Props spread to img element */
    imageProps?: Record<string, any>;
    /** Get root element ref */
    elementRef?: React.ForwardedRef<HTMLDivElement>;
    /** Get image element ref */
    imageRef?: React.ForwardedRef<HTMLImageElement>;
}
export declare function Image({ className, style, themeOverride, alt, src, fit, width, height, radius, imageProps, withPlaceholder, placeholder, imageRef, elementRef, classNames, styles, ...others }: ImageProps): JSX.Element;
export declare namespace Image {
    var displayName: string;
}
//# sourceMappingURL=Image.d.ts.map