# Image
Package: @thinker-core/mantine-core
Import: import { Image } from '@thinker-core/mantine-core';

## Usage

`Image` is a wrapper for `img` with minimal styles. By default, the image
will take 100% of the parent width. The image size can be controlled with `w`
and `h` [style props](https://mantine.dev/llms/styles-style-props.md).

```tsx
import { Image } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Image
      radius="md"
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png"
    />
  );
}
```


## Image height

In most cases, you will need to set the image height to prevent layout jumps when
the image is loading. You can do so with the `h` [style props](https://mantine.dev/llms/styles-style-props.md).

```tsx
import { Image } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Image
      radius="md"
      h={200}
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-10.png"
    />
  );
}
```


## Image fit

By default the image has `object-fit: cover` style - it will
resize to cover the parent element. To change this behavior, set `w="auto"` and `fit="contain"` props.

```tsx
import { Image } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Image
      radius="md"
      h={200}
      w="auto"
      fit="contain"
      src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-9.png"
    />
  );
}
```


## Fallback image

Set the `fallbackSrc` prop to display a fallback image when the image fails to load:

```tsx
import { Image } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Image
      radius="md"
      src={null}
      h={200}
      fallbackSrc="https://placehold.co/600x400?text=Placeholder"
    />
  );
}
```


## Usage with Next.js Image

The `Image` component is a [polymorphic component](https://mantine.dev/llms/guides-polymorphic.md), its root element can be changed with the `component` prop.
You can use it with `next/image` and other similar components.

```tsx
import NextImage from 'next/image';
import { Image } from '@thinker-core/mantine-core';
import myImage from './my-image.jpg';

function Demo() {
  return <Image component={NextImage} src={myImage} alt="My image" />;
}
```


#### Props

**Image props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| fallbackSrc | string | - | Image url used as a fallback if the image cannot be loaded |
| fit | ObjectFit | - | Controls `object-fit` style |
| onError | (event: SyntheticEvent<HTMLImageElement, Event>) => void | - | Called when image fails to load |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius` |
| src | any | - | Image url |
| ts | StyleProp<"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "d2" \| "d1" \| "d3" \| "d4" \| "d5" \| "d6" \| "d7" \| "d8" \| "d9" \| "d10" \| "h7" \| "h8" \| "h9" \| "h10" \| "t2" \| "t1" \| "t3" \| "t4" \| "t5" \| "t6" \| ... 63 more ... \| "lu10"> | - | TextStyle, custom text styles that will override fz, lh, fw, td |

**Image.AndFileDisplay props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| color | MantineColor | - | Key of `theme.colors` or any valid CSS color value, by default value depends on color scheme |
| description | React.ReactNode | - | Description of the image or file. For file type it will show file size by default, can also be set to `true` to show file size |
| descriptionProps | Record<string, any> | - | Props passed down to the `Input.Description` component |
| error | React.ReactNode | - | Determines whether the pill should have error styles and `aria-invalid` attribute |
| errorProps | Record<string, any> | - | Props passed down to the `Input.Error` component |
| fullWidth | boolean | - | Full width of the display (horizontal only), `true` by default |
| getFileIcon | (file: File) => ReactNode | - | Get file icon |
| id | string | - | Static id used as base to generate `aria-` attributes, by default generates random id |
| imageProps | Omit<ImageProps, "src"> | - | Image component props |
| label | React.ReactNode | - | ImageAndFileDisplay label, visible only when `orientation` is `horizontal` |
| labelProps | Record<string, any> | - | Props passed down to the `Input.Label` component |
| onRemove | () => void | - | Called when the remove button is clicked |
| orientation | "horizontal" \| "vertical" | - | Controls orientation, `'horizontal'` by default |
| overlay | React.ReactNode | - | Overlay content |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `'full'` by default. |
| removeButtonPosition | "right" \| "top-right" | - | Controls the position of the remove button, `'right'` by default |
| removeButtonProps | ActionIconProps & Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | - | Props passed down to the remove button |
| scaleWrapper | boolean | - | Scale label, description and error text to the size of the display |
| size | MantineSize \| number | - | Controls width/height of the display, `'md'` by default |
| src | string \| File | - | Source of the image or file |
| ts | StyleProp<"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "d2" \| "d1" \| "d3" \| "d4" \| "d5" \| "d6" \| "d7" \| "d8" \| "d9" \| "d10" \| "h7" \| "h8" \| "h9" \| "h10" \| "t2" \| "t1" \| "t3" \| "t4" \| "t5" \| "t6" \| ... 63 more ... \| "lu10"> | - | TextStyle, custom text styles that will override fz, lh, fw, td |
| type | "image" \| "file" | - | Type of the image or file, `'image'` by default |
| withAsterisk | boolean | - | Determines whether the label should have required asterisk |
| withRemoveButton | boolean | - | Controls if the remove button is shown, `true` by default |
| wrapperOrder | ("label" \| "description" \| "error")[] | - | Controls order of the elements, `['label', 'description', 'error']` by default |


#### Styles API

Image component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**Image selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Image-root | Root element |

**Image CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --image-object-fit | Controls `object-fit` property |
| root | --image-radius | Controls `border-radius` property |

**Image data attributes**

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| root | data-fallback | Image failed to load | - |

**Imageandfiledisplay selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Imageandfiledisplay-root | Root element |
| display | .mantine-Imageandfiledisplay-display | Display element |
| contentWrapper | .mantine-Imageandfiledisplay-contentWrapper | Content wrapper |
| labelWrapper | .mantine-Imageandfiledisplay-labelWrapper | Label wrapper |
| label | .mantine-Imageandfiledisplay-label | Label |
| description | .mantine-Imageandfiledisplay-description | Description |
| remove | .mantine-Imageandfiledisplay-remove | Remove button |
| error | .mantine-Imageandfiledisplay-error | Error |
| overlay | .mantine-Imageandfiledisplay-overlay | Overlay |

**Imageandfiledisplay CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --ifd-background-color | Controls `background-color` property |
| root | --ifd-size | Controls `width` and `height` properties |
| root | --ifd-border-radius | Controls `border-radius` property |
| root | --ifd-label-fz | Controls `font-size` property of label |
| root | --ifd-description-fz | Controls `font-size` property of description |

**Imageandfiledisplay data attributes**

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| root | with-label | `label` prop is set | - |
| root | full-width | `fullWidth` prop is set | - |
| root | orientation | - | Value of `orientation` prop |
| display | type | - | Value of `type` prop |