1.0.1 • Published 2 years ago
@way2up/lazy-load-image v1.0.1
Way2Up lazy load component for Vue.js projects
This is custom lazy-load component for images.
Installation
If you use npm: npm install @way2up/lazy-load-image
If you use Yarn: yarn add @way2up/lazy-load-image
Usage
Inside your vue component:
<template>
<lazy-load-image :src="imgSrc" width="500" height="500"/>`
</template><script>
import LazyLoadImage from '@way2up/lazy-load-image'
import '@way2up/lazy-load-image/dist/style.css'
export default {
components: LazyLoadImage,
data: () => ({
imgSrc: './assets/images/test.jpg'
})
}
</script>Props
| Prop name | Type | Description |
|---|---|---|
| src | String | Required prop, value of an image src attribute |
| placeholder | String | Placeholder, which we show before the image is loaded |
| background | String | Background property for .app-img__placeholder element, (we can show background instead of placeholder before the image is loaded) |
In addition to these props you can also use width, height and alt as usual HTML attributes.