Image

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.

Basic Usage

Fallout

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).

Fallout - Delete (odstrániť)

Atribút fallout s hodnotou "delete" spôsobí odstránenie elementu v prípade, že prišlo k chybe pri načítaní obrázka.

Fallout - Log

Atribút fallout s hodnotou "log" spôsobí odstránenie elementu v prípade, že prišlo k chybe pri načítaní obrázka.

Kedy použiť

Použite wje-img na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.

Kedy nepoužiť

Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.

Prístupnosť

Doplňte alternatívny text pre obrázky, čitateľné kontrasty a textové ekvivalenty pre ikony bez popisu.

Odporúčané postupy

• Komprimujte médiá a používajte lazy loading pri veľkých zoznamoch.
• Pri kartách a zoznamoch držte konzistentné informačné priority.
• Neopakujte rovnakú informáciu súčasne textom aj ikonou bez pridanej hodnoty.

Atribúty a vlastnosti

src

Popis	Nastavuje odkaz na zdroj pre voľbu src.
Atribút	src
Typ	string
Predvolené	-

alt

Popis	Nastavuje textovú hodnotu uloženú vo voľbe alt.
Atribút	alt
Typ	string
Predvolené	-

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

addAction

Popis	Pridá action do spravovanej kolekcie komponentu.
Signatúra	(name: string, func: Function) => void

removeAction

Popis	Odstráni action z aktuálneho stavu komponentu.
Signatúra	(name: string) => void

CSS tieňové časti

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné

Názov	Popis
--img-width	Vlastná CSS premenná, ktorá riadi img width.
--img-height	Vlastná CSS premenná, ktorá riadi img height.

Sloty

Pre tento komponent nie sú dostupné žiadne sloty.