Skip to content
Home

Image

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.

import { Img } from '@dnb/eufemia'


render(<InlineImg alt="..." src="..." width="100" height="100" />)

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