---
title: Image
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.986Z
checksum: 8a48d687c1120b6b63608b4cc61f2b61dabd6eed53a4d55d7610760dcfefdd70
---

# 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](/web/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/web/layout-and-typography/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 />);
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## 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": {
    "src": {
      "doc": "The URL of the image.",
      "type": "string",
      "status": "required"
    },
    "alt": {
      "doc": "Text alternative for the image, read by screen readers. Use an empty string (`alt=\"\"`) for decorative images.",
      "type": "string",
      "status": "required"
    },
    "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](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```