-
Imagvueprovides basic image processing props(size,blur,contrast,grayscale, etc.). -
Support image lazy loading.
-
All Attributes can bind with data
Get from npm / yarn:
npm i imagvueyarn add imagvueDirectly include imagvue.min.js to your view like
<script src='https://cdn.jsdelivr.net/npm/imagvue@0.0.5/dist/imagvue.min.js'></script><imagvue v-model="url" width="400" height="600"></imagvue>import imagvue from 'imagvue' export default { name: 'app', components: { imagvue, }, data(){ return { url: 'https://source.unsplash.com/random', localURL: require('./imagvue.png'), } } }Use transition-group and set attribute src with your loading image inner imagvue. Also you can set attributelazy for delay time.
Type: String
Required: ture
Your loading image.
Type: Number
Default: 0
Show image delay time.
Type: String
Default: 0px
Syntax similar to that of CSS Margin
Type: Number
Default: 0
Ratio of element convergence
<imagvue v-model="url" :onerror="()=>url='https://i.stack.imgur.com/cl91I.png'" width="400" height="600" > <transition-group :src="require(loading.gif)" --> your loading image :lazy="500" --> lazy time , default is 0 ( ms ) rootMargin="0px 0px" :threshold="0.1" > </transition-group> </imagvue>
Available in latest browsers. If browser support is not available, use this polyfill.
Type: String
Required: ture
The image URL. This is mandatory for the <imagvue>
<imagvue v-model="url"></imagvue>Type: String , Number
Required: false
Default: auto
The intrinsic width of the image in pixels.
Type: String , Number
Required: false
Default: auto
The intrinsic height of the image in pixels.
Type: Function
Required: false
If an error occurs while trying to load or render an image , call a function
<imagvue v-model="url" :onerror="()=>url='./error.png'" > </imagvue>
Type: String , Number
Required: false
Default: 0
Applies a Gaussian blur to the input image.
Range: 0 ~ larger value ( px )
<imagvue v-model="url" :blur="50"></imagvue>
Type: String , Number
Required: false
Default: 100
Adjusts the contrast of the input.
Range: 0 ~ over 100 ( % )
<imagvue v-model="url" :contrast="50"></imagvue>
Type: String , Number
Required: false
Default: 100
Applies a linear multiplier to input image
Range: 0 ~ over 100 ( % )
<imagvue v-model="url" :brightness="50"></imagvue>
Type: String , Number
Required: false
Default: 0
Converts the input image to grayscale.
Range: 0 ~ 100 ( % )
<imagvue v-model="url" :grayscale="50"></imagvue>
Type: String , Number
Required: false
Default: 0
Applies a hue rotation on the input image.
Range: 0 ~ 360 ( deg )
<imagvue v-model="url" :hue-rotate="50"></imagvue>
Type: String , Number
Required: false
Default: 0
Inverts the samples in the input image.
Range: 0 ~ 100 ( % )
<imagvue v-model="url" :invert="50"></imagvue>
Type: String , Number
Required: false
Default: 0
Applies transparency to the samples in the input image.
Range: 0 ~ 100 ( % )
<imagvue v-model="url" :opacity="50"></imagvue>
Type: String , Number
Required: false
Default: 0
Saturates the input image.
Range: 0 ~ 100 ( % )
<imagvue v-model="url" :saturate="50"></imagvue>
Type: String , Number
Required: false
Default: 0
Converts the input image to sepia.
Range: 0 ~ 100 ( % )
<imagvue v-model="url" :sepia="50"></imagvue>
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.
export default { name: 'app', components: { imagvue, }, data(){ return { dropShadow:{ offset: 16, --> required blurRadius: 0, --> optional default 0 px spreadRadius: 0, --> optional default 0 px color: 'black' --> optional default black } } } }<imagvue v-model="url" :dropShadow="dropShadow"></imagvue>
Type: Boolean
Required: false
Default: true
if you won't to use filters ( blur,contrast,grayscale, etc.).
just set props filters to false
<imagvue v-model="url" :filters="false"></imagvue>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>
<imagvue v-model="url" :customData="customData()"></imagvue>methods:{ onLoadEvent(){ //todo }, customData(){ return { on: { load: this.onLoadEvent, } } } }<template> <div class="container"> <imagvue class="lazyimage" v-for="d in loadUrls" :key="d.url" :onerror="()=>d.url=errorURL" :value="d.url" width="400" height="267" :blur="filters.blur" :brightness="filters.brightness" :contrast="filters.contrast" :grayscale="filters.grayscale" :hue-rotate="filters.rotate" :opacity="filters.opacity" :invert="filters.invert" :saturate="filters.saturate" :sepia="filters.sepia" :dropShadow="dropShadow" :customData="customData()" > <transition-group :src="d.lazy" :lazy="0" rootMargin="0px 0px" :threshold="0.1"></transition-group> </imagvue> </div> </template><script> import imagvue from 'imagvue'; export default { components:{ imagvue, }, data(){ 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:{ onLoadEvent(){ console.log("Image on load!"); }, customData(){ return { on: { load: this.onLoadEvent, } } } } } </script><style> .container{ display: flex; justify-content: center; align-items: center; flex-direction: column; } .lazyimage{ max-width: 100%; display: block; margin: 1024px auto 128px; background-repeat: no-repeat; background-size: contain; } </style>Imagvue is licensed under MIT License.