Use vue plug-vue-lazyload lazy load plugin and encountered in the course of the picture does not update problem

When the network requests slow advance this photo Add a placeholder image pixel is relatively low, and will not stacked in one, or a large blank display, allowing users to experience a little bit better.

1. Install the plug-in:

npm install vue-lazyload --save-dev

2. main.js introduction of plug-ins:

import VueLazyload from 'vue-lazyload'  //引入这个懒加载插件

　Vue.use (VueLazyLoad, {
　　preLoad:  1.0, // set the aspect ratio picture, the default is 1.3
　　error: the require ( './ Assets / IMG / weixin_error.jpg'), // display a failure load
　　loading: require ( '. /assets/img/logo.png '), // display the loaded
　　attempt:. 1
　})

Configuration picture position here, the configuration can not find the pictures by the usual route, so I use require

Specific reference may be configured to use:

https://www.npmjs.com/package/vue-lazyload

3. can be used directly in the img in the component anywhere: src -> v-lazy

<img v-lazy = "Image Address": Key = "Image URL">

Note >>>: key = "" must be added, otherwise it will appear, refresh the page, the other content refresh, but only a picture of the situation does not refresh