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

       好吧，废话不多说了。理论再多，其实正文就是在使用别人造好的轮子。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来自定义自己想要的效果了