@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