我這里是在vue框架中使用的
方法就是用iframe加載圖片

html代碼如下
注意：需要在img標(biāo)簽外面再包裹一個(gè)div標(biāo)簽

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

首先在utils文件夾中創(chuàng)建一個(gè)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'

然后在頁面圖片渲染完成之后調(diào)用wxImgUrl處理方法

coverPicUrlSet: function() {
 if (document.getElementsByClassName('coverPicUrl').length > 0) { // 判斷是否有需要處理的圖片
     wxImgUrl('coverPicUrl').then(res => { // 每次調(diào)用之后重復(fù)調(diào)用，來處理多張圖片的情況
       this.coverPicUrlSet()
     })
   }
 }