a vuepress plugin to better supporting image lazy loading

The plugin will preferentially use native image lazy-loading, if the browser does not support it, it will be implemented through lozad

base on markdown-it-img-lazy and markdown-it-imsize and lozad

Live Demo and Documentation

yarn add vuepress-plugin-img-lazy
# or
npm i vuepress-plugin-img-lazy

module.exports = {
  plugins: [
    'img-lazy'
  ]
}

![img](/img.jpg)
# or
![img](/img.jpg =500x300) <!-- better -->

• registered as global components

// enhanceAppFile.js
import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'

export default ({ Vue }) => {
  Vue.component(ImgLazy.name, ImgLazy)
}

• or registered as components

import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'

export default {
  components: { ImgLazy }
}

• use

<template>
  <img-lazy src="/img.jpg" />
</template>

• Type: Boolben
• Default: true

Use the native image lazy-loading for the web

• Type: string
• Default: lazy

Default class name for image

1. Base URL already included by default, But it does not include the <img/> label in the markdown file

If you need to use both Base URL and <img/> labels, refer to

<img :data-src="$withBase('/img.png')" loading="lazy" class="lazy">