---
title: 'Image'
description: 'Image element exists to have a future possibility to optimize and add features.'
version: 0.0.0-development
generatedAt: 2026-09-03T13:34:43.748Z
checksum: 35cca6c671f9d29d3ed82f1b9f9ca8847bb3436db60ecd8a5869d540f98df374
---

# Image

## Import

```tsx
import { Img } from '@dnb/eufemia/elements'
```

## Description

By default, the Eufemia `Img` element renders a `figure` containing an `img` element and, when a non-empty `caption` is provided, a `figcaption`. The wrapper provides light styling, caption support, and integration with [Skeleton](/uilib/components/skeleton).

It relies on native HTML semantics: `figure` has the implicit `figure` role, while an `img` with meaningful `alt` text has the implicit `img` role. Therefore, `Img` does not add `role="img"` to the `figure`.

Provide meaningful `alt` text for informative images, or `alt=""` for decorative images. Do not add an `onClick` handler directly to `Img`. Use a link for navigation or a button for actions, following valid HTML nesting. When an image is the only visible content, ensure that the link or button has an accessible name describing its action or destination.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/elements/img)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/elements/image)
- [W3C Images Tutorial](https://www.w3.org/WAI/tutorials/images/)


## Demos

### Basic image element


```tsx
const StyledImg = styled(Img)`
        border-radius: 1rem;
      `;
const CustomImage = () => {
  return <StyledImg width="100" height="100" alt="DNB logo" src="/dnb/android-chrome-192x192.png" />;
};
render(<CustomImage />);
```


### Image with invalid source


```tsx
const MyImg = Img;
render(<MyImg width="100" height="100" alt="Alt text" src="https://invalid" />);
```


### Image with caption


```tsx
const StyledImg = styled(Img)`
        border-radius: 1rem;
      `;
const CustomImage = () => {
  return <StyledImg width="100" height="100" alt="Alt text" caption="Caption text" src="/dnb/android-chrome-192x192.png" />;
};
render(<CustomImage />);
```


### Image element with skeleton


```tsx
const StyledImg = styled(Img)`
        border-radius: 1rem;
      `;
const CustomImage = () => {
  const [state, setState] = useState(true);
  return <Skeleton show={state}>
            <StyledImg width="100" height="100" alt="DNB logo" src="/dnb/android-chrome-192x192.png" />
            <br />
            <Skeleton.Exclude>
              <ToggleButton checked={state} onChange={({
        checked
      }) => setState(checked)} top="large">
                Toggle
              </ToggleButton>
            </Skeleton.Exclude>
          </Skeleton>;
};
render(<CustomImage />);
```

## Properties

`className` targets the wrapping `figure` element. All other native image
properties target the inner `img` element. Use `figureProps` to pass additional
native properties to the wrapper.


```json
{
  "props": {
    "skeleton": {
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional"
    },
    "imgClass": {
      "doc": "Deprecated. Use `imageClassName` instead.",
      "type": "string",
      "status": "deprecated"
    },
    "imageClassName": {
      "doc": "Custom `className` for the inner `img` element.",
      "type": "string",
      "status": "optional"
    },
    "figureProps": {
      "doc": "Native HTML properties for the wrapping `figure` element.",
      "type": "HTMLProps<HTMLElement>",
      "status": "optional"
    },
    "element": {
      "doc": "Deprecated. The wrapper should remain a `figure` to preserve its semantics.",
      "type": [
        "HTMLElement",
        "string"
      ],
      "status": "deprecated"
    },
    "caption": {
      "doc": "Use to define a caption for the image. Uses `<figcaption>`.",
      "type": "string",
      "status": "optional"
    },
    "loading": {
      "doc": "Can either be `eager` or `lazy`. Defaults to `eager`.",
      "type": [
        "\"eager\"",
        "\"lazy\""
      ],
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  }
}
```