圖片預載入需要token認證的地址處理

1.添加函數修改img的屬性；

/**
 * 
 * @param {*} idName 傳入的id，獲取改img的dom，添加相應的數學
 */
export const proxyImg = (idName) => {
  const img = document.getElementById(idName || 'img');
  const url = img.getAttribute('authsrc');
  const request = new XMLHttpRequest();
  request.responseType = 'blob';
  request.open('get', url, true);
  request.setRequestHeader('x-access-token', localStorage.getItem('x-access-token')); // 換成自己的token
  request.onreadystatechange = e => {
    if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
      img.src = URL.createObjectURL(request.response);
      img.onload = () => {
        URL.revokeObjectURL(img.src);
      }
    }
  };
  request.send(null);
}

2.處理圖片，這裡已圖片list進行處理為例；

const { proxyImg } = require('@/utils/utils');
import { isEmpty } from 'lodash';

/**
   * 
   * @param {*} imgList 傳入的img 是數組 [{fileId: 3318310, fileName: '一張圖片', fileSize: "982.00KB" , fileUrl: "/staticResource/images/一張圖片.jpg", ...},{}]
   * @param {*} field 傳入的id，作用是獲取img的dom
   */
  const dealImgData = (imgList: any[], field: String) => {
    if (!isEmpty(imgList)) { // 判斷imgList是否為空
      imgList.forEach((el, index) => {
        // 為什麼又判斷，就是解決不顯示的問題， field都要傳......
        if(field) {
          proxyImg(`img${field}${index}`)
        }
      });
    }
  }

 3.調用函數;

  dealImgData('傳入的img的數組', '傳入id，隨便傳，在當前頁面是唯一值就OK了’);
  備註：可以在componentDidUpdate中調用，也可以在useEffect中調用

備註:

一般載入圖片會用到img標簽,添加src屬性，如下所示：

<img src="imgUrl" />

但是因為需要在get請求頭中加入token信息，不能直接將後臺返回的圖片url直接添加到src 後端返回二進位流，我們需要將二進位流以圖片的形式顯示在頁面中

看到二進位，可以將responseType 設置為 blob

URL.createObjectURL()

URL.createObjectURL()  靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的視窗中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

URL.revokeObjectURL()

URL.revokeObjectURL() 靜態方法用來釋放一個之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之後，應該通過調用這個方法來讓瀏覽器知道不用在記憶體中繼續保留對這個文件的引用了。