使用element-UI中——el-image加载图片，加载过程中闪现白色背景的解决方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用element-UI中——el-image加载图片，加载过程中闪现白色背景的解决方法相关的知识，希望对你有一定的参考价值。
参考技术A 前端项目中，图片的加载也是一个比较重要的点。优化的方向，大都在加载方式和加载过程上。加载方式也都是在懒加载的方式，但在加载过程中，似乎方式是更多样化的。包含：加载图片分为本地图片和远程图片。加载前的默认占位图片，加载过程中的动画或是异步同步处理，以及加载出错的处理等。好吧，废话不多说了。理论再多，其实正文就是在使用别人造好的轮子。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__placeholder和el-image__error来自定义了。
[Vue warn] Unknown custom element <el-image>
参考技术A el-image 是elementui2.8.0才添加的控件，需要先升级element-ui解决方案：升级elementui版本
第一步：卸载element-ui，在命令行中输入
第二步：安装element-ui，在命令行中输入
第三步：main.js中default修改为theme-chalk
以上是关于使用element-UI中——el-image加载图片，加载过程中闪现白色背景的解决方法的主要内容，如果未能解决你的问题，请参考以下文章