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

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