实现图片的异步加载

import React, { useEffect, useRef, useState } from 'react'

export default function AboutPage() {
  const [imgSrc, setImgSrc] = useState('https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF')
  const imgRef = useRef<HTMLImageElement>(null)

  const asyncLoadImg = (src: string) => {
    return new Promise((resolve, reject) => {
      imgRef.current &&
        (imgRef.current.onload = () => {
          resolve(imgRef.current)
        })

      imgRef.current &&
        (imgRef.current.onerror = () => {
          const error = new Error(`图片加载失败，url：${src}`)
          reject(error)
        })

      imgRef.current && (imgRef.current.src = src)
    })
  }

  useEffect(() => {
    asyncLoadImg(imgSrc).then(res => {
      console.log(`======`)
      console.log(res)
    })
  }, [])

  return (
    <div>
      <img ref={imgRef} src="" alt="" />
    </div>
  )
}