@tranxuanthang/vue-progressive-img

vue-progressive-img

** This is branch and documentation for vue 2. Visit the main branch for vue 3.**

Progressive Image Loading plugin for Vue 3

Example/Demo

• https://github.com/tranxuanthang/cat-pics-pil
• https://awesome-shirley-c6c0a7.netlify.app/

Installation

Install the package:

# npm
npm install --save vue-progressive-img

# yarn
yarn add vue-progressive-img

Initialize the plugin:

  import Vue from 'vue'
  import App from './App.vue'
+ import { ProgressiveImgPlugin } from 'vue-progressive-img'
+ import 'vue-progressive-img/src/styles.css'

+ Vue.use(ProgressiveImgPlugin)

  new Vue({
    render: function (h) { return h(App) }
  }).$mount('#app')

Usage

Use ProgressiveImg component:

<template>
  <progressive-img
    tiny-src="60px-width-image.jpg"
    src="full-image.jpg"
    width="1280"
    height="720"
    alt="Image description"
    ...
  />
</template>

Or use directive:

<template>
  <span class="block flex justify-center mb-6 mx-auto max-h-[50vh]"
    v-for="(image, index) in images"
    :key="index"
  >
    <img
      :data-tiny-src="image.tinyUrl"
      :data-full-src="image.fullUrl"
      :width="image.width"
      :height="image.height"
      :alt="image.description"
    />
  </span>
</template>