react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析

React 可以通过图片的三个状态（正在加载中、加载完成、加载失败）来通知用户图片是否正在加载中或加载是否失败等信息。在 React 中，实现图片加载的方法通常是使用 img 元素，我们可以给 img 元素绑定 load 和 error 事件。下面是完整攻略的示例说明。

实现图片正在加载中

当图片正在加载中时，可以展示一张占位图或者 loading 动画。使用 React，我们可以先在组件的 state 中定义一个 isLoading 的属性，初始值设置为 true。当图片加载完成后，我们再将其改为 false。然后在 img 元素的 onLoad 事件中，当图片加载完成时，我们将 isLoading 设置为 false。

import React, { useState } from 'react';

function App() {
  const [isLoading, setIsLoading] = useState(true);
  return (
    <div>
      {
        isLoading ? <p>Loading...</p> : null
      }
      <img src="image.jpg" onLoad={() => setIsLoading(false)} />
    </div>
  );
}

实现图片加载完成

当图片加载完成时，需要将图片展示在页面上。我们可以先在组件的 state 中定义一个 isLoaded 的属性，初始值设置为 false。当图片加载完成后，我们再将其改为 true。然后在 img 元素的 onLoad 事件中，当图片加载完成时，我们将 isLoaded 设置为 true。

import React, { useState } from 'react';

function App() {
  const [isLoaded, setIsLoaded] = useState(false);
  return (
    <div>
      {
        isLoaded ? <img src="image.jpg" /> : null
      }
      <img src="image.jpg" onLoad={() => setIsLoaded(true)} />
    </div>
  );
}

实现图片加载失败

当图片加载失败时，需要提供用户以文字等方式告知加载失败。我们可以先在组件的 state 中定义一个 isError 的属性，初始值设置为 false。当图片加载失败后，我们再将其改为 true。然后在 img 元素的 onError 事件中，当图片加载失败时，我们将 isError 设置为 true。

import React, { useState } from 'react';

function App() {
  const [isError, setIsError] = useState(false);
  return (
    <div>
      {
        isError ? <p>Sorry, cannot load the image.</p> : <img src="image.jpg" />
      }
      <img src="image.jpg" onError={() => setIsError(true)} />
    </div>
  );
}

通过上面的示例代码，我们就能够实现图片正在加载中、加载完成和加载失败三个阶段的处理。