Hex Core JS
    Preparing search index...

    Type Alias ImageProps

    ImageProps: {
        alt?: string;
        errorContent?: NonTextNode;
        fallbackContent?: NonTextNode;
        fillColor?: string;
        height?: number;
        loading?: "eager" | "lazy";
        loadingContent?: NonTextNode;
        noImageContent?: NonTextNode;
        onClick?: () => void;
        onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
        onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
        size?: CSSPropertyValue | number;
        sizing?: "auto" | "width-scaled" | "height-scaled" | "cover" | "contain";
        src?: string;
        title?: string;
        width?: number;
    } & Partial<ClassNameProps & StyleProps>

    Type Declaration

    • Optionalalt?: string

      Alternative text for the image.

    • OptionalerrorContent?: NonTextNode

      Content to display in the event of an error.

    • OptionalfallbackContent?: NonTextNode

      Content to display when the image is not shown. Acts as a default for the noImageContent, loadingContent, and errorContent props (but can be overridden by those props).

    • OptionalfillColor?: string

      Background color of the element after the element has loaded (only visible if using sizing="contain" or if the image has transparency).

    • Optionalheight?: number

      Fixed height of the image.

    • Optionalloading?: "eager" | "lazy"

      Loading options for the image.

    • OptionalloadingContent?: NonTextNode

      Content to display while loading the image. Note that the image component will also be rendered, so absolute positioning is recommended (the container element has relative position).

    • OptionalnoImageContent?: NonTextNode

      Content to display if no src property is given.

    • OptionalonClick?: () => void

      onClick handler

    • OptionalonError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void

      Callback function called when image loading encounters an error.

    • OptionalonLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void

      Callback function called when the image loads.

    • Optionalsize?: CSSPropertyValue | number

      Size of the image (as a CSS property). Effect depends on the value of the sizing prop. If sizing is "width-scaled", then only the width is set by size. If sizing is "height-scaled", then only the height is set by size. If sizing is "auto", "cover", or "contain", then size sets both the width and height of the container.

    • Optionalsizing?: "auto" | "width-scaled" | "height-scaled" | "cover" | "contain"

      Sizing of the image. "auto" uses the default size of the image or the width and height properties if given. "width-scaled" and "height-scaled" scale the image to fit the container while maintaining the aspect ratio. "cover" and "contain" scale the image to fill the container while maintaining the aspect ratio. "cover" will crop the image to fill the container while "contain" will add padding to the container to fit the image.

    • Optionalsrc?: string

      The src (URL or data) of the image.

    • Optionaltitle?: string

      HTML title attribute.

    • Optionalwidth?: number

      Fixed width of the image.

    Settings

    Member Visibility