做一個單純的react-image顯示組件

最近項目上有一個需求，在顯示圖片的時候，需要傳遞自定義的頭部就行認證。google了一番之后，發現沒有現成的組件庫可以使用【也可能是我沒找到】，所以請求圖片只能采用xhr方式來異步加載。下面就是在做這個組件庫時的一些筆記，主要關注以下兩個點：

• 圖片的等比例縮放處理
• 在請求圖片的過程中，由於是異步加載，如果后加載的一個圖片太小，而前一個圖片過大，就會有圖片顯示不正確的問題

圖片的縮放處理

最開始想到的是使用CSS 屬性background來顯示圖片，后來發現使用CSS的background-size實現按照比例縮放圖片好像有點困難，具體如下：

• 如果圖片原始的尺寸小於外層容器的尺寸，我希望它居中顯示
• 如果圖片原始尺寸大於外層尺寸
  • 如果ratio > 1 (imageWidth / imageHeight)，圖片應該按照寬度來進行縮放
  • 如果ratio = 1, 圖片等比例縮放
  • 如果ratio < 1, 圖片按照高度來縮放

因為要取到圖片的原始尺寸，使用img標簽顯示也會有點問題。所以最終采用的是new Image()這個Web Api來創建的圖片。具體代碼如下：

export const getImage = (src: string) => (
  new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error(NETWORK_ERROR));
    image.src = src;
    image.crossOrigin = '';
    return image;
  })
);

同時，圖片縮放的部分代碼如下：

if (ratio > 1) {
    if (imageWidth > wrapperWidth) {
      displayWidth = wrapperWidth;
      displayHeight = parseInt(`${(1 / ratio) * wrapperWidth}`, 10);
    }
  } else if (ratio === 1) {
    if (imageWidth > wrapperWidth) {
      displayWidth = wrapperWidth;
      displayHeight = wrapperWidth;
    } else {
      displayWidth = wrapperHeight;
      displayHeight = wrapperHeight;
    }
  } else if (imageHeight > wrapperHeight) {
    displayWidth = parseInt(`${ratio * wrapperHeight}`, 10);
    displayHeight = wrapperHeight;
  }

圖片的覆蓋問題

因為需要進行頭部的認證，所以請求圖片的方式統一使用了XHR的方式來進行請求，然后就會造成圖片覆蓋的問題。造成這個原因是，當出現了圖片地址替換的時候，比如類似下面的代碼：

const [src, setSrc] = useState(src1);
useEffect(() => { setTimeout(() => setSrc(src2)); }, [src]);

return (
  <div className="App">
    <Image width={50} height={100} src={src} errorMessage="something bad happen" />
  </div>
);

上述代碼中的src2會后被加載，如果src1的加載速度比src2的加載速度快倒沒有什么問題，但是反之，就會出現后加載的圖片反而被先加載的圖片進行覆蓋。那么，怎么解決這個問題：

想到的辦法是，當開始加載后一個圖片時，首先進行判斷是否存在上一個加載圖片的請求，如果存在，則直接abort，類似於debounce的做法。具體的做法如下：

• 聲明一個圖片請求的類，專門用來作圖片請求

  export default class ImageRequest {
    xmlHttpRequest: XMLHttpRequest;
    url: string;
    headers: XMLHttpRequestHeaders;
  
    setHeaders() {
      if (this.headers) {
        const keys = Object.keys(this.headers);
        keys.forEach((key: string) => {
          this.xmlHttpRequest.setRequestHeader(key, this.headers[key]);
        });
      }
    }
  
    request(url: string, headers: XMLHttpRequestHeaders) {
      this.url = url;
      this.headers = headers;
  
      if (this.xmlHttpRequest) {
        this.xmlHttpRequest.abort();
      }
  
      this.xmlHttpRequest = new XMLHttpRequest();
      this.xmlHttpRequest.open('GET', this.url);
      this.xmlHttpRequest.responseType = 'blob';
      this.setHeaders();
      this.xmlHttpRequest.send();
  
      return new Promise((resolve, reject) => {
        this.xmlHttpRequest.onload = () => {
          this.xmlHttpRequest = null;
          if (this.xmlHttpRequest.status === 200) {
            resolve(this.xmlHttpRequest.response);
          } else {
            reject(new Error(`${IMAGE_LOAD_ERROR}${this.xmlHttpRequest.statusText}`));
          }
        };
  
        this.xmlHttpRequest.onerror = () => {
          reject(new Error(NETWORK_ERROR));
        };
      });
    }
  }
  

  在每個實例中維持一個XMLHttpRequest的引用，每當進行請求的時候，首先判斷當前引用是否存在，如果存在，則直接abort，否則，則進行圖片的請求。同時在組件中，需要創建一個實例

  // 記住，不能在組件外部聲明實例，需要保存在每一個組件中，確保每一個組件都有一個新的請求實例
  // const imageRequest: ImageRequest = new ImageRequest();
  
  const Image: React.FC<Props> = (props) => {
    const [request] = useState<ImageRequest>(new ImageRequest());
  
    useEffect(() => {
      if (src) {
        setState(LOADING_STATE.LOADING);
        loadImage(request, src, headers).then((img: HTMLImageElement) => {
          const { displayWidth, displayHeight } = getDisplayImageSize(img, width, height);
          const displayImage = img;
          displayImage.width = displayWidth;
          displayImage.height = displayHeight;
          setState({ ...LOADING_STATE.SUCCESS, image: displayImage });
        }).catch(() => setState(LOADING_STATE.FAIL));
      }
    }, [loadImage, src]);
    
    // ...
  };
  

  注意，這里的ImageRequest實例只能保存在組件的state中，因為如果在組件開始使用const引入，如果一個頁面中存在多個相同組件時，就會導致多個組件共享一個request實例中的xmlHttpRequest引用，就會出現前面的圖片全部都會被abort掉的情況。

總結

看是簡單的問題，做起來也會比較復雜，口說的沒用，做起來才行。

最后，項目地址：https://github.com/Rynxiao/react-image，npm包地址：https://www.npmjs.com/package/rt-image，歡迎留言和star