项目中展示图片，避免用户右键复制图片地址进行盗图问题解决

在table表格中可以使用动态id给每一个图片列绑定id，如果是只有一个位置展示图片给固定的就可以；
将对应的id传入方法便于方法获取该元素
<span slot="showPics" slot-scope="text, record">
        <img :id="'showPics'+record.id" style="width:50px;height:50px" :src="getUrl('showPics'+record.id,record.showPics)" alt="">
      </span>
 vue中事件：
 getUrl(id, url){
      this.$nextTick(()=>{
        const eleAppend = document.getElementById(id);
        hidePic(eleAppend,url)
      })
    }
common.js:  该方法原理就是前端在获取图片路径之后通过本地get请求将图片转为blog资源，然后每次在network中获取blog图片，展示完即释放内存中图片资源，这样右键再访问资源已经不在，达到不可导图效果
export function hidePic(element,url){
    window.URL = window.URL || window.webkitURL
    if(typeof history.pushState === 'function'){
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
      if (this.status === 200) {
        var blob = this.response
        //释放内存文件  阻止通过路径直接访问
        element.onload = function (e) {
          window.URL.revokeObjectURL(element.src)
        }
        element.src = window.URL.createObjectURL(blob)
      }
    }
      xhr.send()
  }
}