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/elements'
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}>
alt="DNB logo"
<br />
<ToggleButton checked={state} on_change={({ checked }) => setState(checked)} top="large">Toggle</ToggleButton>
render(<CustomImage />)