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.

Vypnutie lazy loadingu

Ak potrebujete obrázok vykresliť okamžite, pridajte atribút no-lazy alebo nastavte property noLazy. Komponent vtedy nepoužije IntersectionObserver, preskočí loader a nastaví reálny src hneď pri renderovaní.

<wje-img no-lazy src="/assets/hero.png" alt="Hero image"></wje-img>

Loader a base path

V lazy režime komponent pred načítaním obrázka zobrazí loader. Ak atribút loader nenastavíte, súbor assets/img/image-loader.gif sa načíta z base path knižnice. Pri vlastnom umiestnení adresára dist/ nastavte base path a nasaďte aj jeho podadresár assets:

import { setBasePath } from 'wj-elements';

setBasePath('/vendor/wj-elements/dist');

Predvolený loader sa potom načíta z /vendor/wj-elements/dist/assets/img/image-loader.gif. Explicitná hodnota atribútu loader sa použije bez úpravy, takže môžete zadať aj vlastný asset:

<wje-img
  src="/assets/profile-photo.jpg"
  loader="/assets/loaders/image.gif"
  alt="Profilová fotografia"
></wje-img>

Atribút no-lazy loader úplne preskočí.

Basic Usage

Ukážka zobrazuje obrázok v najjednoduchšom režime, teda bez fallback logiky a doplnkových scenárov.

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

alt

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

fallout

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

loader

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

noLazy

Popis	Určuje, či je voľba no-lazy zapnutá a ovplyvňuje správanie komponentu.
Atribút	no-lazy
Typ	boolean
Predvolené	false

src

Popis	Nastavuje odkaz na zdroj pre voľbu src.
Atribút	src
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.