element el-image放多张图片 显示大图

 更新时间:2021年5月20日 16:37  
element el-image组件多张图片有小图,点击小图显示大图


element el-image组件多张图片有小图,点击小图显示大图

vue文件


html

 <div class="el-image">
      <el-image lazy v-for="(ele,index) in picture.piclist" :key="index" style="width: 100px; height: 100px;margin:5px" 
      :src="picture.piclist[index]"  :preview-src-list="picture.piclist"></el-image>
 </div>


其中picture.piclist :// 接口返回的 图片url数组对象



小图显示样式

.el-image {
    position: relative;
    display: inline-block;
    overflow: hidden;
}