【若依】element-ui 图片展示到前端、图片点击放大展示

列表数据展示：

点击放大图片的功能，效果展示如下：

 

前端代码如下：

<el-table-column
  label="材料证明"
  prop="qjImage"
  align="center"
  width="100px">

  <template slot-scope="scope" >
    <!-- 点击小图片，触发@click显现出遮罩层 -->
    <el-image v-show="scope.row.qjImage" 
      :src="envUrl+scope.row.qjImage" 
      style="width: 100px;overflow: hidden;" 
      @click="testclick(scope.row.qjImage)" 
      >
    </el-image> 

    <!-- 遮罩层出现，里面有一张75%大小的img -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="75%" :src="envUrl+testData">
    </el-dialog>
  </template>
</el-table-column>

data数据如下：

envUrl: process.env.VUE_APP_BASE_API,
dialogVisible: false,
testData: "",

mothods:方法如下：

testclick(a){
  // 打开遮罩
  this.dialogVisible = true
  this.testData = a
}

数据库存储设计如下（若依自带的upload方法）：

后端也是返回这一串路径，前端拼接上 envUrl 就可以显示了。