reactjs img 当图片加载完成时再展示否则展示skeleton

可以使用React的useState和useEffect钩子来实现这个功能。首先，我们需要一个状态来记录图片是否已经加载完成。然后，我们使用useEffect钩子来监听图片加载事件，一旦图片加载完成，就将状态设置为true。最后，我们使用条件渲染来展示图片或骨架屏。

以下是一个简单的实现：

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

function Image({ src, alt }) {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => setLoaded(true);
  }, [src]);

  return (
    <>
      {!loaded && <Skeleton />}
      <img src={src} alt={alt} style={{ display: loaded ? 'block' : 'none' }} />
    </>
  );
}

function Skeleton() {
  return <div className="skeleton" />;
}

在上面的代码中，我们使用useState来创建了一个名为loaded的状态，初始值为false。在useEffect钩子中，我们创建了一个新的Image对象，设置其src属性为传入的src值，并监听其onload事件。一旦图片加载完成，就会触发onload事件，我们就可以将loaded状态设置为true。

在返回的JSX中，我们使用条件渲染来展示图片或骨架屏。如果loaded状态为false，就展示骨架屏；否则，展示图片。我们使用style属性来动态设置图片的display属性，如果loaded为true，就将其设置为block，否则设置为none。

最后，我们还定义了一个简单的Skeleton组件来展示骨架屏。你可以根据自己的需要自定义这个组件的样式