vue点击图片查看大图的几种方法

一.使用插件vue-directive-image-previewer

1.安装：
npm install vue-directive-image-previewer -D
2.main.js中引入：

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer) 

3.使用：（直接在标签添加属性v-image-preview）
<img style="height: 80px" :src="scope.row.topicPicture" v-image-preview>
4.效果：（简简单单遮罩层）

5.优点：简单，一次性安装设置后，每次需要使用只需要在标签添加属性v-image-preview
6.缺点：遮罩层过低，会被dialog框遮挡
参考：https://blog.csdn.net/SpringCYB/article/details/103203813

二.使用elementui组件image的属性–previewSrcList

elementui的引用就不多做叙述了，毕竟使用这个方法就默认项目已经使用elmentui了
image组件：https://element.eleme.cn/#/zh-CN/component/image
但是一般实际应用中，url和srcList根据后台获取数据设置的
1.html：（设置属性:preview-src-list=“srcList”）

<el-image :src="url + scope.row.image.downFilePath" style="width:10vh" :preview-src-list="srcList" />

2.js
2.1.变量初始化

export default {
  data() {
    return {
      url:'',
      srcList: []
    }
  }
}

2.2.数据获取

const meetId = this.$route.query.meetId
this.search = Object.assign({meetId:meetId}, this.searchForm,this.pageInfo)
getMeetdetails(this.search).then(res => {
  if(res.result !==null){
    this.list = res.result.datas
    //设置srcList
    for(var i=0; i<this.list.length; i++){
      if(this.list[i].image!=null){
        this.srcList.push(this.url+this.list[i].image.downFilePath)
      }
    }
    this.pageInfo.total = res.result.total
    this.loading.table= true
  }
})

3.效果：可放大缩小，旋转，切换下一张

4.优点：遮罩层置于最顶层，不会被dialog框遮挡
5.缺点：需要配合elementui使用，操作稍稍麻烦一点
这里还有一个插件，尚未实践
https://blog.csdn.net/yp090416/article/details/81486581?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3.channel_param