iview carousel 图片不显示；iview 轮播图 图片无法显示（转载）

转载来源：https://segmentfault.com/q/1010000016778108

 

 

相关代码

<Carousel autoplay v-model="value2" v-if="uploadList!=''" loop>

<Carousel-Item v-for="(item,index) in uploadList" :key="index">
  <div class="demo-carousel">
   <img :src="item" style="height:241px;width:444px;" alt=""/>
   </div>
</Carousel-Item>

</Carousel>

受@熊猫酒仙  简便的方法，给carousel加一个v-if指令，值与你控制modal的booean值绑定，这样carousel就会延迟初始化，达到计算listwidth不让其未0的效果

这个问题是宽度为0导致的。从源码中可以看出，宽度在页面初始化（mounted）的时候就已经计算了，this.handleResize(); 我是把这个组件抽出来了，然后改了它的源码，在 调用 updatePos 之前 执行一下 handleResize 就行了。下面给两张图