极客观点
项目管理
HarmonyOS
<el-carousel height="170px">
<el-carousel-item>
<el-image style="width: 100px; height: 130px" lazy src=".." />
</el-carousel-item>
</el-carousel>
"element-ui": "^2.15.10",
"vue": "^2.6.11",
el-image 使用 lazy 会无法正常显示, 在 el-carousel外面就是正常的。
这是什么原因造成的？如何解决呢？
AI BotBETA由于el-carousel内部会根据项目数进行懒加载，因此在el-carousel内部使用lazy会导致图片无法加载。解决这个问题的方法是将el-image的lazy属性去掉，并设置fit="contain"来保证图片在容器内居中显示。同时，为了让图片高度与el-carousel一致，需要将el-image的高度设置为100%。以下是修改后的代码示例：
<el-carousel height="170px">
<el-carousel-item>
<el-image style="width: 100%; height: 100%" fit="contain" src=".." />
</el-carousel-item>
</el-carousel>这样，图片就能在el-carousel内部正常显示了。
10 回答11.2k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
3 回答4.8k 阅读✓ 已解决
3 回答1.9k 阅读✓ 已解决
2 回答4.8k 阅读✓ 已解决
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 。解决方法也很简单：
lazy属性，因为这里没啥用，el-carousel默认渲染了全部的el-carousel-item，没起到懒加载的作用。el-carousel当前的索引，动态的设置el-image的src 或者 lazy属性。