Image

Image wrapper with a loader placeholder. The placeholder is shown until the image fires a load event. data-loaded is set after successful load; data-position is set on the wrapper.

Preview

Open Sandbox

Usage


import { Image } from '@wire-ui/react'
 
<Image
  src="/photo.jpg"
  alt="A photo"
  position="center"
  className="rounded"
  onImageLoaded={() => console.log('loaded')}
/>

Props

Prop	Type	Default	Description
`src`	`string`	required	Image source URL
`alt`	`string`	required	Alt text
`position`	`HorizontalPosition`	—	Sets `data-position` on wrapper
`onImageLoaded`	`() => void`	—	Called when image loads successfully
`className`	`string`	—	Applied to the wrapper element

Data attributes

Attribute	Element	When present
`data-position`	Wrapper	`position` prop is set
`data-loaded`	`<img>`	After successful `load` event