我这里是在vue框架中使用的
方法就是用iframe加载图片

html代码如下
注意：需要在img标签外面再包裹一个div标签

<div class="coverPicUrlBlock">
	<img :src="item.coverPicUrl" alt="" class="coverPicUrl">
</div>

首先在utils文件夹中创建一个wxImgUrl.js文件
添加如下代码

// 用于处理微信图片的防盗链
export function wxImgUrl(className) { // className是img的class
  return new Promise((resolve, reject) => {
    const random = Date.now()
    let img = document.getElementsByClassName(className)[0]
    let parent = document.getElementsByClassName(className)[0].parentElement
    const url = img.getAttribute('src')
    const imgId = 'img_' + random
    const frameid = 'frameimg' + random
    window['img' + random] = '<img id=' + imgId + ' src=\'' + url + '?' + random + '\' style = "width: 100%; height: 100%; object-fit: cover;"/><script>window.onload = function() { ' +
    'parent.document.getElementById(\'' + frameid + '\').contentWindow.document.body.style.margin = 0 }<' + '/script>'
    const html = '<iframe id="' + frameid +
      '" src="javascript:parent.img' + random + ';" frameBorder="0" scrolling="no" width="100%" height="100%" style= " margin:0; height: 100%;"></iframe>'
    parent.innerHTML = html
    resolve(true)
  })
}

在页面中引入wxImgUrl.js文件

import { wxImgUrl } from '@/utils/wxImgUrl'

然后在页面图片渲染完成之后调用wxImgUrl处理方法

coverPicUrlSet: function() {
 if (document.getElementsByClassName('coverPicUrl').length > 0) { // 判断是否有需要处理的图片
     wxImgUrl('coverPicUrl').then(res => { // 每次调用之后重复调用，来处理多张图片的情况
       this.coverPicUrlSet()
     })
   }
 }