1.0.0-alpha.5 • Published 2 years ago
@tranxuanthang/vue-progressive-img v1.0.0-alpha.5
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
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>
1.0.0-alpha.5
2 years ago
1.0.0-alpha.4
2 years ago
1.0.0-alpha.3
2 years ago
1.0.0-alpha.2
2 years ago
1.0.0-alpha.1
2 years ago
2.0.0-alpha.1
2 years ago
0.0.1
2 years ago