EOS UIImage
An image component for responsive media, lazy loading, BlurHash placeholders, and explicit loading states.
Import
import '@eosjs/ui/image';Introduction
Image is a framework-agnostic Web Component for responsive media. It preserves the native image model while adding lazy loading, BlurHash placeholders, loading feedback, and explicit fallback states.
Basic Usage
Use the controls in this example to inspect the supported image states and layout options.
Basic usage
Fallback
Use the error slot to provide recovery-oriented content when the image cannot be loaded.
Responsive and circular images
responsive lets the image follow the available inline size. circle clips the image to a circle while preserving the declared dimensions.
API
Generated from custom-elements.json for eos-image.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
src | — | — | — |
src-type | — | — | — |
alt | — | — | — |
width | — | — | — |
height | — | — | — |
loading | — | — | — |
crossorigin | — | — | — |
object-fit | — | — | — |
placeholder | — | — | — |
placeholder-type | — | — | — |
placeholder-fill | — | — | — |
show-delay | — | — | — |
responsive | — | — | — |
circle | — | — | — |
Events
| Name | Type | Description |
|---|---|---|
blurhash-error | CustomEvent | — |
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL or BlurHash string |
src-type | url | blurhash | url | How to interpret src |
alt | string | — | Alternative text for the image |
width / height | string | — | Host dimensions; defaults to 100px and can be sized below 100px |
loading | lazy | eager | eager | Whether to wait for viewport visibility |
crossorigin | string | — | Native cross-origin image setting |
object-fit | cover | contain | fill | none | scale-down | cover | Native image fitting mode |
placeholder | string | — | Placeholder URL or BlurHash |
placeholder-type | url | blurhash | url | How to interpret the placeholder |
placeholder-fill | boolean | false | Keep the placeholder as a background layer |
show-delay | string | 0 | Delay before revealing a loaded image, in milliseconds |
responsive | boolean | false | Make the image follow its container width |
circle | boolean | false | Clip the image to a circle |
Events
load and error use native event names. progress is the component's structured network-progress event.
| Event | When it fires | event.detail |
|---|---|---|
load | The image is ready to display | — |
error | The image failed to load | — |
progress | Network data is received | { loaded, total, src } |
Slots
<eos-image src="/cover.jpg" style="width: 320px; height: 200px">
<span slot="loading">Preparing image…</span>
<span slot="error">Image unavailable</span>
</eos-image>