saber-plugin-image v0.2.2

saber-plugin-image

Allows the generation of responsive images (srcset included), lazy-loading and all that good stuff.

Install

yarn add saber-plugin-image

Usage

In your saber-config.yml:

plugins:
  - resolve: saber-plugin-image
    options:
      sizes:
        - 1000
        - 800
        - 500
      placeholder: true
      blendIn: true

Use it, either in Vue or Markdown!

<saber-image
  src="./waifu.jpg"
  :lazy="{
    placeholder: true,
    lazyLoad: true,
    blendIn: true
  }"
/>

Please note that responsive image generation only works with local images. You can use <saber-image> with non-local images to get lazy-loading though.

Options

These options can be passed either in the Saber configuration or to each <saber-image> individually by using the lazy prop. The Saber configuration additionally accepts all Vue Lazyload constructor and Responsive loader options.

If you don't like the blendIn loading transition, you can create your own ones, like this fade-in transition:

img {
  transition: opacity 0.5s;
}

img[lazy='loading'] {
  opacity: 0;
}

img[lazy='loaded'] {
  opacity: 1;
}

License

MIT.