vue实现点击图片查看图片

使用vue一个组件vue-directive-image-previewer
安装依赖

npm install vue-directive-image-previewer -D

在main.js全局导入使用

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

在项目中使用

<template>
  <div>
      <img v-image-preview src="picture-url"/>
  </div>
</template>