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