Image#

Import#

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.

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
• Docs code
• W3C Images Tutorial

Demos#

Basic image element#

Code

Dark mode

Image with invalid source#

Code

Dark mode

Image with caption#

Code

Dark mode

Image element with skeleton#

Toggle

Dark mode

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 />)