@djx/image v0.2.3

@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

Events