如何实现表格内图片预览？

如图：表格内显示出图片链接，鼠标悬停链接弹出图片，现在希望点击图片能够实现一些预览操作：放大、缩小。

UI

<el-table-column
            v-for="(item, i) in cols"
            :key="i"
            align="center"
            :prop="item.prop"
            :label="item.label"
          >
            <template slot-scope="scope">
              <span v-if="item.prop !== 'ngimg'">{{
                scope.row[item.prop]
              }}</span>
              <span v-else>
                <el-popover placement="right" width="400" trigger="hover">
                    <el-image
                    style="width: 400px; height: 400px;cursor:pointer"
                    :src="scope.row[item.prop]"
                    @click="zoomPic(scope.row[item.prop])"
                  ></el-image>
                  <span slot="reference" style="color: blue">{{
                    scope.row[item.prop]
                  }}</span>
                </el-popover>
              </span>
            </template>
          </el-table-column>

 import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(VueViewer)

 zoomPic(url){
      this.$viewerApi({
          images: url,
        })
    }

点击图片后，报错：