图片预览【解决微信浏览器缓存导致图片无法预览的问题】

1.安装依赖

npm install vue-photo-preview --save

2.main.js

//图片预览
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

var CheckPhotoOptions = {
    fullscreenEl: false, //关闭全屏按钮
    closeEl: true, //显示关闭按钮
    zoomEl: false, //关闭放大按钮
}
Vue.use(preview, CheckPhotoOptions)

3.showimg.vue中使用

<template>     
         <img
                :src="changebleproductImg"
                :large="changebleproductImg"
                preview="0" preview-text=""
              >
</template>


<script>
computed: {
        //每次请求的图片不同的时间戳
      changebleproductImg:function(){
          var timestamp=new Date().getTime();
          return this.productimage+'?v='+timestamp;
      },
}，
mounted(){
        //清除定时器
        var phototimer= setInterval(() => {
            //预览图片刷新
            this.$previewRefresh();
        }, 500);
        //监听关闭图片查看器
        this.$preview.on('close',()=>{//close只是众多事件名的其中一个，更多请查看文档
            clearInterval(phototimer);
            console.log('图片查看器被关闭');
        })
}  
    
</script>