element 中 el-carousel 与 el-image 的冲突，如何解决？-灵析社区

今天吃什么你说吧

"el-image" 的懒加载是有条件的：存在属性 "overflow: auto;" 或者 scroll 的父级元素，且通过滚动时间触发。 在 "el-carousel" 中使用有问题，是 element-ui 的问题，他在判断是否需要加载时，是通过 "isInContainer" 方法。这个方法在获取 "display: none;" 元素下的元素位置数据时 ，是通过 "getBoundingClientRect()" 方法获取，这是全部位置数据为 0 。所以这里判断出了问题："https://github.com/ElemeFE/element/blob/290e68ea6aa6c56b7d83182b650e3be4f77ff1b0/packages/image/src/main.vue#L167" (https://link.segmentfault.com/?enc=yXpl%2Bse91sIeiUIjI%2FUrrQ%3D%3D.HYqZrpRuXgcKv5tHhkKeABPTE5MAJY6Tb5mEoHuCHXCe6W9CkBnaMpTR6%2FmR%2FXI2Sgwu2WfZ63TLlDfQEKUhfqbt8xPwDr4zncKMUnJ5ZiUxNquKIQzadZRo7WMEu%2F9OY6i61cgucCWDVjswyIsoDPE4Sy3jB2Itvaxg5RyRnBI%3D) 。 解决方法也很简单： * 方案1：不使用 "lazy" 属性，因为这里没啥用，"el-carousel" 默认渲染了全部的 "el-carousel-item"，没起到懒加载的作用。 * 方案2：监听 "el-carousel" 当前的索引，动态的设置 "el-image" 的src 或者 lazy属性。