首页 > 网站 > WEB开发 > 正文

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

2024-04-27 15:06:59

字体：大中小

来源：转载

供稿：网友

一下讨论问题的前提是项目已经使用了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了

上一篇：实例代码讲解jquery easyui动态tab页

下一篇：初识H5（笔记二）

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿创2023年5月以来最大单周涨幅

2024-04-27 13:35:46

雷军：小米正在申请3万件专利，以提升自身的竞争力

2024-04-27 13:33:47

人参泡酒15年后竟“复活”？网友：这酒还能喝不？

2024-04-24 22:53:44

芯片股普涨！英伟达市值一夜大涨6000亿元

2024-04-23 19:32:50

面馆老板1天卖100碗刚够交房租要卖到150碗才能实现盈利

2024-04-23 19:25:50

跌近30%！茶百道上市一小时跌没3年净利润

2024-04-23 19:13:19

疑难解答

图片精选

网友关注