一下讨论问题的前提是项目已经使用了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了
使用vue-lazyload解决Vue+Webpack项目的图片加载问题
最新推荐文章于 2024-06-22 17:08:13 发布