Image
The Image element is used to display images. Adds lazyload function to images and displays a placeholder icon (loader) in the form of an animated image during loading.
It uses the Intersection Observer API, so it only loads images when they are visible in the browser window. This reduces network load and improves site performance.
Basic Usage
Fallout
The Fallout attribute specifies the action to be taken in the event of an error when loading the image. Možné hodnoty sú delete (odstráni sa obrázok) alebo log (vypíše chybu do konzoly).
Fallout - Delete (delete)
The fallout attribute with the value "delete" causes the element to be removed if an error occurred while loading the image.
Fallout - Log
The fallout attribute with value "log" causes the element to be removed if an error occurred while loading the image.
When to use
Use wje-img to improve readability, scannability, and contextual understanding of content.
When not to use
Do not replace structured interactive data with media-only presentation when precision is needed.
Accessibility
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
Best Practices
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
Attributes and Properties
src
| Description | The source URL of the image. |
| Attribute | src |
| Type | string |
| Default | - |
alt
| Description | The alternative text for the image. |
| Attribute | alt |
| Type | string |
| Default | - |
Events
No events available for this component.
Methods
addAction
| Description | Adds a new action to the internal actions object. |
| Signature | (name: string, func: Function) => void |
removeAction
| Description | Removes an action from the actions list if it exists. |
| Signature | (name: string) => void |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--img-width | The width of the image. |
--img-height | The height of the image. |
Slots
No slots available for this component.