使用element-ui的el-image实现图片预览

<template>
  <el-button type=“primary” @click="handlePreview">点击预览</el-button>
  <el-image 
    ref="imgPreview"
    style="width: 0px; height: 0px"
    :src="previewUrl" 
    :preview-src-list="previewList">
  </el-image>
</template>

data() {
  return {
    imgUrl: 'https://img2.baidu.com/it/u=3251542979,3065793396&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083',
    previewUrl: '',
    previewList: []
  }
},
methods: {
  handlePreview() {
    this.previewUrl = this.imgUrl
    this.previewList = [this.imgUrl]
    this.$nextTick(() => {
      this.$refs.imgPreview.clickHandler()
    })
  }
}