需求：在 element 的 table 组件中使用  image 图片预览大图的功能时，给鼠标悬浮图片时给一个遮罩层、蒙层的效果，来优化用户交互。

一、引用 image 图片设置放大属性并预设 icon 图标

 //给最大的盒子设置 class
 <div  class="img-box" >
    //导入 element 的 image组件
      <el-image
        style="width: 75px; height: 75px"
        :preview-teleported="true" 
        class="images"
        :hide-on-click-modal=true 
        src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
        :zoom-rate="1.2"
        :preview-src-list=" 
        ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
        :initial-index="1" 
        fit="cover" >
      </el-image>
      // 使用 element 中查看 icon ，可自定义图片
     <el-icon  class="icon-box" >
        <View />
     </el-icon>
</div>

当前效果：

二、 实现盒子的 hover 遮罩层、蒙层。

.img-box {
  // 这个宽高看你自己定义，这个是图片盒子的大小
  width: 75px;
  height: 75px;
  //父级设置 相对定位，让 icon设置绝对定位时能够以该父级为准。
  position: relative;
  // icon 设置 绝对定位 让其固定在你想要的合适位置。 样式可调整，自己定位即可。
  .icon-box {
    display: none;
    position: absolute;
    // 保持icon居中
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// 设置鼠标悬浮时的效果
.img-box:hover {
  background: #000;
  // 给图片设置样式
  .images {
    opacity: 0.4;
  }
  // 给 icon 设置样式，.el-icon 是组件自带的类名。
  .el-icon {
    display: inline-block;
    color: #fff;
  }
}

效果图：

三、 解决 图标 icon 遮挡图片的点击预览事件问题。

        在 element 中 image 的图片预览放大事件没有通过额外的变量来实现，所以我们在做遮罩层、蒙层的时候就会遇见一个问题，如何在蒙层中你加入了额外的 icon 图标，那么这个图标会遮挡住原本的图片预览放大事件。

        其实你不嫌麻烦的话，可以使用 element 中的对话框，配合图片显示也能完成图片发大的效果，并且不会出现这种遮挡事件问题。

这里解决 图标遮挡 element 自带的放大事件其实用一句话解决就好，给你图标的 css 设置：

//在你的 icon 元素上，添加该 css 属性。
pointer-events:none

        pointer-events 属性用于控制元素如何响应鼠标或者触摸事件的，当设置为 none 时，元素不响应鼠标或者触摸事件，但可以实现内容区域内其余元素响应鼠标或者触摸事件，达到事件穿透效果。

最后！最后！在 element 中在 table 中使用 image 时，请将放大预览元素插入到 body 元素之上

image组件中设置 :preview-teleported="true"，否则你会有这种奇效：

四、最后完整代码。

 //给最大的盒子设置 class
 <div  class="img-box" >
    //导入 element 的 image组件
      <el-image
        style="width: 75px; height: 75px"
        :preview-teleported="true" 
        class="images"
        :hide-on-click-modal=true 
        src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
        :zoom-rate="1.2"
        :preview-src-list=" 
        ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
        :initial-index="1" 
        fit="cover" >
      </el-image>
      // 使用 element 中查看 icon ，可自定义图片
     <el-icon  class="icon-box" >
        <View />
     </el-icon>
</div>
//引入 icon  vue组件我这边是全局引入的，忽略
import { View } from "@element-plus/icons-vue";

//设置样式 less 
.img-box {
  width: 75px;
  height: 75px;
  //父级设置 相对定位，让 icon设置绝对定位时能够以该父级为准。
  position: relative;
  // icon 设置 绝对定位 让其固定在你想要的合适位置。 样式可调整，自己定位即可。
  .icon-box {
    display: none;
    position: absolute;
    // 保持icon居中
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
// 设置鼠标悬浮时的效果
.img-box:hover {
  background: #000;
  // 给图片设置样式
  .images {
    opacity: 0.4;
  }
  // 给 icon 设置样式，.el-icon 是组件自带的类名。
  .el-icon {
    pointer-events:none;
    display: inline-block;
    color: #fff;
  }
}


// 图片盒子和图片的大小请按照你实际情况更换就行。
// 如果想设置动画或者过渡效果，请注意将 display 替换成 opacity来实现
// 以上参考代码在使用中出现问题，请评论Q我，感谢指出问题！