-
Imagvue
provides basic image processing props(size,blur,contrast,grayscale, etc.). -
Support image lazy loading.
-
All Attributes can bind with data

Demo
Installation
Get from npm / yarn:
npm i imagvue
yarn add imagvue
or just include imagvue.js to your view like
Usage
html:
vue file:
name: 'app'components:imagvue{returnurl: 'https://source.unsplash.com/random'localURL:}
Lazy loading Image
how to use ?
Use transition-group
and set attribute src
with your loading image inner imagvue
.
Also you can set attributelazy
for delay time.
1. src
Type: String
Required: ture
Your loading image.
2. lazy
Type: Number
Default: 0
Show image delay time.
3. rootMargin
Type: String
Default: 0px
Syntax similar to that of CSS Margin
4. threshold
Type: Number
Default: 0
Ratio of element convergence
your loading image :lazy="500" --> lazy time , default is 0 ( ms ) rootMargin="0px 0px" :threshold="0.1" >

Browser Support
Available in latest browsers. If browser support is not available, use this polyfill.
Props
1. value
Type: String
Required: ture
The image URL. This is mandatory for the <imagvue>
2. width
Type: String
, Number
Required: false
Default: auto
The intrinsic width of the image in pixels.
3. height
Type: String
, Number
Required: false
Default: auto
The intrinsic height of the image in pixels.
4. onerror
Type: Function
Required: false
If an error occurs while trying to load or render an image , call a function

5. blur
Type: String
, Number
Required: false
Default: 0
Applies a Gaussian blur to the input image.
Range: 0 ~ larger value ( px )

6. contrast
Type: String
, Number
Required: false
Default: 100
Adjusts the contrast of the input.
Range: 0 ~ over 100 ( % )

7. brightness
Type: String
, Number
Required: false
Default: 100
Applies a linear multiplier to input image
Range: 0 ~ over 100 ( % )

8. grayscale
Type: String
, Number
Required: false
Default: 0
Converts the input image to grayscale.
Range: 0 ~ 100 ( % )

9. hueRotate
Type: String
, Number
Required: false
Default: 0
Applies a hue rotation on the input image.
Range: 0 ~ 360 ( deg )

10. invert
Type: String
, Number
Required: false
Default: 0
Inverts the samples in the input image.
Range: 0 ~ 100 ( % )

11. opacity
Type: String
, Number
Required: false
Default: 0
Applies transparency to the samples in the input image.
Range: 0 ~ 100 ( % )

12. saturate
Type: String
, Number
Required: false
Default: 0
Saturates the input image.
Range: 0 ~ 100 ( % )

13. sepia
Type: String
, Number
Required: false
Default: 0
Converts the input image to sepia.
Range: 0 ~ 100 ( % )

14. dropShadow
Type: Object
Required: false
Default: null
Applies a drop shadow effect to the input image.
offset
: This value to set the shadow offset.blurRadius
: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.spreadRadius
: Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink.color
: The color of the shadow.
name: 'app' components: imagvue { return dropShadow: offset: 16 --> required blurRadius: 0 --> optional default 0 px spreadRadius: 0 --> optional default 0 px color: 'black' --> optional default black }

15. filters
Type: Boolean
Required: false
Default: true
if you won't to use filters ( blur,contrast,grayscale, etc.).
just set props filters
to false
16. customData
Type: Object
Required: false
Default: null
This is used to pass additional information to <imagvue>
- on: events to be subscribe of
<imagvue>
- props: props to be passed to
<imagvue>
methods: { //todo } { return on: load: thisonLoadEvent }
Code Example
<script>; components: imagvue { return filters: blur: 0 contrast: 100 brightness: 100 grayscale: 0 rotate: 0 opacity: 100 invert: 0 saturate: 100 sepia: 0 dropShadow: offset: 16 blurRadius: 10 spreadRadius: 10 color: 'black' errorURL:'https://cdn.browshot.com/static/images/not-found.png' loadUrls: url:'https://goo.gl/PxTSno' lazy:'https://goo.gl/aiwqia' url:'https://goo.gl/K1kZWk' lazy:'https://goo.gl/vnHTAh' url:'https://goo.gl/gTZMkF' lazy:'https://goo.gl/K1Mheq' url:'https://goo.gl/PxTSno1' lazy:'https://goo.gl/aiwqia' } methods: { console; } { return on: load: thisonLoadEvent } </script>
<</
License
Imagvue is licensed under MIT License.