useCookie useImage API DEMO useLocalStorage usePrevious useScript　useSessionStorage useStorage useTimeInterval useToggle

useImage

加载图片

API

const [
  img: HTMLImageElement,
  status: 'loading' | 'loaded' | 'error' // 加载状态
] = useImage(
  src: string, // 图片链接
  crossOrigin?: string
);

DEMO

加载状态：loading

() => {
  const [img, status] = useImage(
    'https://wxt.sinaimg.cn/mw1024/62194d50ly1g8ayqntoqpj207i0a0750.jpg',
  )
  return (
    <div>
      <h3>加载状态：{status}</h3>
      <div style={{ width: '300px', height: '400px' }}>
        {status === 'loaded' && <img src={img.src} />}
      </div>
    </div>
  )
}

() => {
  const [img, status] = useImage(
    'https://wxt.sinaimg.cn/mw1024/62194d50ly1g8ayqntoqpj207i0a0750.jpg',
  )
  return (
    <div>
      <h3>加载状态：{status}</h3>
      <div style={{ width: '300px', height: '400px' }}>
        {status === 'loaded' && <img src={img.src} />}
      </div>
    </div>
  )
}