elementUi——点击图片时，预览所有大图——功能实现(两种方案)

今天在做后台管理系统时，遇到一个需求，在表格中有个img的字段，可能有多张图片，在表格中只展示一张，当点击此图片时，展示所有图片的预览大图效果。

遇到这种问题，我的第一反应就是使用走马灯效果：

1.走马灯实现预览大图效果

<el-dialog title="证明图片"
           :visible.sync="dialogImgs"
           width="550" :before-close="closeImg">
    <el-carousel height="680px" :autoplay="false">
        <el-carousel-item v-for="(item,index) in imgArr" :key="item" style="text-align:center;">
            <h2 style="text-align:center;">{{index+1}}-{{imgArr.length}}</h2>
            <img :src="item" alt="证明图片" style="height:100%;width:100%;" />
        </el-carousel-item>
    </el-carousel>
</el-dialog>

当点击图片时，展示弹层，弹层中是一个图片效果的走马灯。

用这种方式，其实是有弊端的，因为图片宽高比不定，因此在固定宽度的弹层中，图片想要展示完整，则需要对图片的宽高进行设定，也就可能导致图片比例的失衡。

此时可以用到css中的object-fit: contain;可以保证图片最长边会显示完整。

也是有其他的解决办法的，就是利用dom元素的background-image中的size的几个参数来处理，比如cover或者contain等。

2.利用el-image来实现

在elementUi中的image图片组件中，是存在大图预览的功能的，只需要给el-image添加一个previewSrcList参数，然后将想要预览的图片数组传入即可。
图片数组的样式就是一个个图片组成的数组。

这个利用el-image的previewSrcList是最简单的方式，因此el-image提供了 fit参数，可以用于设定图片的展示比例问题。