Skip to main content

Image

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.

Basic Usage​

The sample shows the image in the simplest mode, i.e. without fallback logic and additional scenarios.

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 display content that improves the readability, scannability, or context of the information.

When not to use​

Do not use it as a substitute for structured data where precise interaction is needed.

Accessibility​

Add alternative text for images, legible contrasts and text equivalents for icons without descriptions.

  • Compress media and use lazy loading for large lists.
  • Keep information priorities consistent for tabs and lists.
  • Do not repeat the same information in text and icon at the same time without adding value.

Attributes and properties​

alt​

PopisNastavuje textovú hodnotu uloženú vo voľbe alt.
Atribútalt
Typstring
Predvolené-

fallout​

PopisNastavuje textovú hodnotu uloženú vo voľbe fallout.
Atribútfallout
Typstring｜*
Predvolené-

loader​

PopisNastavuje textovú hodnotu uloženú vo voľbe loader.
Atribútloader
Typstring
Predvolené./assets/img/image-loader.gif

src​

PopisNastavuje odkaz na zdroj pre voľbu src.
Atribútsrc
Typstring
Predvolené-

Events​

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

Methods​

addAction​

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

removeAction​

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

CSS shadow parts​

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

CSS custom variables​

NázovPopis
--img-widthVlastná CSS premenná, ktorá riadi img width.
--img-heightVlastná CSS premenná, ktorá riadi img height.

Slots​

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

Content