Element-ui中的el-image的图片预览功能（:preview-src-list）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element-ui中的el-image的图片预览功能（:preview-src-list）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天用了element-ui中的图片预览功能，但是它的图片预览功能只能预览事先定义的图片，与我的业务功能完全不符，我的业务功能是在表格上显示多张图片，当点击图片时，就预览当前点击的图片。
所以我将其修改了一下，将后端返回的图片依次渲染在页面上；功能就是当点击表格中的某个图片时，这个图片就被放大预览，且图片的显示是以轮播图的形式展现出来。

Element-ui中的el-image的图片预览功能（:preview-src-list）

<div v-show="scope.row.evaluatePicture&&scope.row.evaluatePicture.length" style="display: flex; align-items: center; flex-direction: column;">
              <el-image
                v-for="(item,index) in scope.row.evaluatePicture"
                :key="index"
                style="width: 50px; height: 50px"
                :src="$_BASE_IMG_API + item"
                :preview-src-list="evaluatePictureList"
                title="点击查看图片"
                @click="clickevaluatePicture(scope.row)"
              />
            </div>

上面的这段代码与element-ui中的没有区别，唯一的区别就是我设置了一个点击事件click。
在下面的js中，定义srcList（也是就是我的evaluatePictureList）变量。:src是显示的图片，我使用v-for来动态创建多个<el-image></el-image>，这个就可以在页面上渲染多张图片了。


methods:{
// 点击评价图片，大图预览多张图片
    clickevaluatePicture (row) {
      var srclist = []
      for (const imgArr of row.evaluatePicture) {
// 把数据库传来的图片放进数组里
        srclist.push(this.$_BASE_IMG_API + imgArr) 
      }
      this.evaluatePictureList = srclist// 赋值
}
}

push 把我数据库的图片放进数组里因为在那个定义srcList（也是就是我的evaluatePictureList）变量，它要求的必须是数组的形式，而我拿到的数据是 ‘one-stand/photo/20211209/a3c81a587afbf317af42566dc207c5b5.jpg， ....’，所以就得多次把数据放进数组里文章来源地址https://www.toymoban.com/news/detail-512047.html

到了这里，关于Element-ui中的el-image的图片预览功能（:preview-src-list）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！