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.

Disable Lazy Loading

If you need the image to render immediately, add the no-lazy attribute or set the noLazy property. The component will not create an IntersectionObserver, skips the loader, and applies the real src during render.

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

Loader and base path

In lazy mode, the component displays a loader before loading the image. When the loader attribute is not set, it loads assets/img/image-loader.gif from the library base path. If you host the dist/ directory at a custom location, configure the base path and deploy its assets subdirectory as well:

import { setBasePath } from 'wj-elements';

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

The default loader is then loaded from /vendor/wj-elements/dist/assets/img/image-loader.gif. An explicit loader attribute is used unchanged, so it can point to a custom asset:

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

The no-lazy attribute skips the loader entirely.

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.

Recommended practices

• 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

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é	-

Events

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

Methods

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 shadow parts

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

CSS custom variables

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

Slots

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