@djx/image

Display images with loading behaviors and aspect ratio

Installation

npm install --save @djx/image

Usage

Make sure you import the component somewehere in your application first:

import '@djx/image';

You can then use it like normal web components in your markup:

<djx-observable-root name="@djx/image">
  <!-- Default mode (Should be fine for google) -->
  <djx-image src="https://path-to-image.jpg/"></djx-image>

  <!-- SEO optimized mode -->
  <djx-image ratio="1x1">
    <noscript>
      <img src="https://path-to-image.jpg/" />
    </noscript>
  </djx-image>
</djx-observable-root>

Make sure to define djx-observable-root if you're using lazy-v (the default)

The loading modes

The component supports 3 types of loading modes: none, lazy-v (v = visible) and lazy-i (i = instant). The default is lazy-v.

Managing the lazy-v mode

If you want to go with the most efficient, which is lazy-v, you have to define a djx-observable-root:

<!-- @djx/image is the default name -->
<djx-observable-root name="@djx/image">
  <djx-image src="https://path-to-image.jpg/"></djx-image>
</djx-observable-root>

<!-- You can use a different observable root if you want -->
<djx-observable-root name="custom-name">
  <djx-image
    observable-root="custom-name"
    src="https://path-to-image.jpg/"
  ></djx-image>
</djx-observable-root>

You can read more about the @djx/observable here

Properties

Name	Description	Default
src	Optional source of the image	null
ratio	The ratio to use with the format 4x3	16x9
drag	Wheter the image should be draggable	false
loading	The loading mode to use (none, lazy-i, lazy-v)	lazy-v
fit	Wheter to stretch to width or height	width
alt	Alternative text	' '
observable-root	The name of the observable root for lazy-v	@djx/image

Events

Name	Description
loading-error	Fired when something went wrong with the loading
loading-start	Fired when the loading has started
loading-end	Fired when the loading has ended
visibility-changed	Fired when the visibility of the image has changed