实现图片的异步加载

最新推荐文章于 2024-02-28 17:21:58 发布

原创最新推荐文章于 2024-02-28 17:21:58 发布 · 817 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

收录于

本文介绍了如何在React组件中使用useState、useRef和async/await实现异步加载图片，确保在About页面上显示图片的同时处理加载失败情况。

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>
  )
}