Skip to content
Home

Image

Info
Demos
Properties

Import

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

Description

The image element associated with the class dnb-img does not have much opinionated styling. It exists more to have a future possibility to optimize and add features.

As of now, the React image "element" (Img) does provide a figure element with the role="img" and an img tag inside. This is mainly to support the Skeleton provider.

Demos

Basic image element

DNB logo

Image with invalid source

Alt text

Image with caption

Alt text
Caption text

Image element with skeleton

DNB logo

Code Editor
const StyledImg = styled(Img)`
  border-radius: 1rem;
`
const CustomImage = () => {
  const [state, setState] = React.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}
          on_change={({ checked }) => setState(checked)}
          top="large"
        >
          Toggle
        </ToggleButton>
      </Skeleton.Exclude>
    </Skeleton>
  )
}
render(<CustomImage />)