shadow
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.
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).
The fallout attribute with the value "delete" causes the element to be removed if an error occurred while loading the image.
The fallout attribute with value "log" causes the element to be removed if an error occurred while loading the image.
| Description | It serves as an alternative text to describe the content of the image, which will be displayed if the image is not loaded. It is also used by screen readers. |
| Attribute | alt |
| Type | string |
| Default | undefined |
| Description | URL of the image. This attribute is mandatory for the <img> element. |
| Attribute | src |
| Type | string |
| Default | undefined |
| Description | The URL of the image that will be displayed when the main image is loaded. |
| Attribute | loader |
| Type | string |
| Default | "./assets/img/image-loader.gif" |
| Description | Specifies the action to take in case of an error when loading an image. Possible values are 'delete' (deletes the image) or 'log' (logs the error to the console). |
| Attribute | fallout |
| Type | string ｜ boolean |
| Default | false |
No events available for this component.
| Description | Adds a new action to the internal action object. |
| Signature | (name: string, func: Function) => void |
| Description | Removes the action from the list of actions, if any. |
| Signature | (name: string) => void |
| Description | Removes the current image by calling the remove method. |
| Signature | () => void |
| Name | Description |
|---|
native | Refers to the img element inside the component |
| Name | Description |
|---|
--wje-img-width | Image width |
--wje-img-height | Image height |
--wje-img-border-radius | Rounding the corners of the image |
No slots available for this component.