How to install and use lazy loading of v lazy pictures

How to install v lazy pictures lazy loading, I believe many inexperienced people are helpless about this, this article summarizes the causes and solutions of the problem, through this article I hope you can solve this problem.

vue is based on vue-lazyload image lazy loading, delayed loading vue-lazyload plug-in effect is the default does not load images.

vlazy pictures lazy loading plug-ins

npminstallvue-lazyload--save-dev

Introduced and used in the entry file main.js

importVueLazyloadfrom'vue-lazyload'

Vue.use(VueLazyload,{

loading:require ('img/loading.png '),//Loading images, must have, otherwise it will be loaded repeatedly

error:require ('img/error.png ')//load failed image

});

Change the image display mode to vlazy image lazy loading

img:

//Change the src attribute to v-lazy,:key is to prevent the image from updating when the page is refreshed or the image is changed

Background image:

v-html, as in a rich text string fetched from the background Picture: (replace src with data-src)

After reading the above content, do you know how to install v lazy pictures? If you still want to learn more skills or want to know more related content, welcome to pay attention to the industry information channel, thank you for reading!