vue-img-tag

pkg.module supported, which means that you can apply tree-shaking in you project

A simple vue2 component, just for img preview, can be used to image input preview

repository

https://github.com/livelybone/vue-img-tag.git

Demo

https://livelybone.github.io/vue/vue-img-tag/

Example

See: example

Installation

npm i -S vue-img-tag

Global name

VueImgTag

Usage

// import all
import VueImgTag from 'vue-img-tag';
 
// Global register
Vue.component('img-tag', VueImgTag);
 
// Local register
new Vue({
  components:{VueImgTag}
})

Props

Name	Type	DefaultValue	Description
lazy	Boolean	false	Enable lazy mode or not
loadingImg	String	none	Can be url or color(should be rgb, rgba or hex)
errorImg	String	none	Don't set to color, only url allowed
src	[String, FileList, File, Promise]	none
preventValue	Number	0	The boundary condition
event	Object	defaultConf	Config of event which is use to judge whether img should load or not, especially useful when lazy mode is enabled

const defaultConf = {
  eventName: 'scroll', // The event listened to
  eventTarget: window, // what dom do event triggered on
}