Vue+elementui 图片放大最好用的组件

组件：
vue-directive-image-previewer

1.在vue前端控制台Terminal中输入以下命令

npm install vue-directive-image-previewer -D

  
  

  
  
1

2.在main.js中添加以下代码

//图片放大组件
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

  
  

  
  
1
2
3
4

3.在<img>标签中加入属性v-image-preview

<el-table-column align="center" label="图片" prop="imageId">
    <template slot-scope="scope">
      <img v-image-preview style="width: 100%" :src="petImage(scope.$index,scope.row)"/>
    </template>
</el-table-column>

  
  

  
  
1
2
3
4
5

4.效果图

效果将会在屏幕中央显示一个大个的图片，点击任意处，图片消失

转载：https://blog.csdn.net/qq_43290288/article/details/108798858