## Image  
DMC alternative for html.Img with placeholder for loading and error states.  
Category: Data Display  

### Simple Example
`Image` is a wrapper for HTML `img` with minimal styles. By default, the image will take 100% of parent width. The 
image size can be controlled with `w` and `h` style props.

```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png",
)
```
### Image height

In most case, you will need to set image height to prevent layout jumps when image is loading. You can do so with `h` [style](/style-props) props.

```python
import dash_mantine_components as dmc

component = dmc.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 parent element. To change this behavior,
set `w="auto"` and `fit="contain"` props.


```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    h=200,
    w="auto",
    fit="contain",
    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-9.png",
)
```
### Placeholder

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

```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    src=None,
    h=200,
    fallbackSrc="https://placehold.co/600x400?text=Placeholder",
)
```
### Background Image

Use BackgroundImage component when you need to display image below any content. Component sets background-image to 
given `src`, background-size to cover and background-position to center.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    style={"width": 300},
    children=dmc.BackgroundImage(
        src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid"
        "=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80",
        children=[
            dmc.Center(
                p="md",
                children=[
                    dmc.Text(
                        "BackgroundImage component can be used to add any content on image. It is used for cards, "
                        "hero headers and similar components",
                        c="yellow",
                    )
                ],
            )
        ],
    ),
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.



#### 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            |
| -------- | --------------- | -------------------- |
| root     | `data-fallback` | Image failed to load |



### Keyword Arguments
#### Image

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- alt (string; optional):
    Image alt text, used as title for placeholder if image was not
    loaded.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- fallbackSrc (string; optional):
    Image url that will be used as a fallback in case `src` prop is
    not set or image cannot be loaded.

- fit (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'contain', 'cover', 'fill', 'scale-down'; optional):
    Controls `object-fit` style, `'cover'` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `0` by default.

- src (boolean | number | string | dict | list; optional):
    Image url.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### BackgroundImage

- children (a list of or a singular dash component, string or number; optional):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    numbers are converted to rem, `0` by default.

- src (string; required):
    Image url.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.