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.

Features

Loader placeholder shown until image loads.

data-loaded set after successful load event.

Supports horizontal position via data-position.

onImageLoaded callback.

Example

Anatomy


import { Image } from '@wire-ui/react'
 
<Image src="/photo.jpg" alt="A sample photo" />

Styling

Image sets data-loaded on the <img> element after a successful load and data-position on the wrapper.


<Image
  src="/photo.jpg"
  position="center"
  className="
    [data-position=left]:justify-start
    [data-position=center]:justify-center
    [data-position=right]:justify-end
  "
/>

Using data attributes

The wrapper element receives data-position from the position prop. The <img> element receives data-loaded after the load event fires.


/* Hide loader after load */
img[data-loaded] + .loader { display: none; }
 
/* Position variants */
[data-position="center"] { display: flex; justify-content: center; }

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