Skip to content
Home

Image

Info
Demos
Properties

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