使用vue-lazyload解决Vue+Webpack项目的图片加载问题

一下讨论问题的前提是项目已经使用了file-loader和url-loader，还没首先说明问题的来源，在使用Vue的循环呈现有图片的列表时，用v-for="item in items"，添加图片的引用资源时，如果这样写<img :src="item.src">，你会发现运行后无法呈现图片。这里有两种方法解决，一种是使用require("item.src")的方法，即循环修改每个item的src，item.src=require("item.src")，当然你也可以设一个新的变量来存require后的值，然后其他的不用修改，图片就能正常显示了。但是有个问题，每次显示多个图片都要循环require，是不是觉得很繁琐，于是介绍第二种解决办法，使用vue-lazyload插件，直接npm install安装就行了。下载后需要配置一下，如图 ，error表示图片加载失败时呈现的图片，loading表示图片正在加载时的动画。使用也非常简单，将之前的“:src”改为“v-lazy”即可，<img v-lazy="item.src">，这样就不需要每次都require了