shadow
Element Image slúži na zobrazovanie obrázkov. Pridáva obrázkom funkciu lazyload a počas načítavania zobrazuje zástupnú ikonu (loader) v podobe animovaného obrázka.
Využíva Intersection Observer API, vďaka čomu načítava obrázky iba vtedy, keď sú viditeľné v okne prehliadača. To znižuje sieťové zaťaženie a zlepšuje výkon stránky.
Atribút Fallout určuje akciu, ktorá sa má vykonať v prípade chyby pri načítaní obrázka. Možné hodnoty sú delete (odstráni sa obrázok) alebo log (vypíše chybu do konzoly).
Atribút fallout s hodnotou "delete" spôsobí odstránenie elementu v prípade, že prišlo k chybe pri načítaní obrázka.
Atribút fallout s hodnotou "log" spôsobí odstránenie elementu v prípade, že prišlo k chybe pri načítaní obrázka.
| 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.