使用element-UI中——el-image加载图片,加载过程中闪现白色背景的解决方法

        前端项目中,图片的加载也是一个比较重要的点。优化的方向,大都在加载方式和加载过程上。加载方式也都是在懒加载的方式,但在加载过程中,似乎方式是更多样化的。包含:加载图片分为本地图片和远程图片。加载前的默认占位图片,加载过程中的动画或是异步同步处理,以及加载出错的处理等。

       好吧,废话不多说了。理论再多,其实正文就是在使用别人造好的轮子。el-image这个标签,在element-UI的2.72版本之前是没有的。在2.8之后加入的。主要多了一个懒加载和预览的功能。在加载前和加载时处理的很粗糙。

先在node_modules下找到element-UI源码包


在element-UI下找到el-image的包

源码分为两个部分:

在main.vue中可以看到

在加载前和加载中是一个类名为el-image__placeholder的div标签,在加载后和加载出错后的处理分别是一个div和img标签。


那么解决方式是:

在加载前和加载后的样式上做更改,可以重写覆盖类名el-image__placeholderel-image__error来自定义自己想要的效果了

  • 8
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值