vue中点击图片可以预览，可放大缩小，如何实现

问题遇到的现象和发生背景

想要实现一个图片预览功能，在h5页面，点击图片，可以预览，并且可以放大，缩小
图片预览时应该背景为半透明状态

你好，用这个组件可以实现你的需求，直接拿来用就好了
https://element.eleme.cn/#/zh-CN/component/image

可以用elementUI
https://element.eleme.cn/#/zh-CN/component/image

<el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>

elementUI中的image组件可以实现，而且还非常的简单

<template>
<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>
</template>

<script>
  export default {
    data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>