如何在 React js 中渲染实际图像之前渲染默认图像？

【问题标题】：How to render default image before rendering the actual image in react js?如何在 React js 中渲染实际图像之前渲染默认图像？
【发布时间】：2021-01-01 21:37:02
【问题描述】：

我通过这样的道具渲染图像：

function AdImg(props) {
    const propImg = `http://localhost:5000/${props.img}`;
    return (
                <img
                    placeholder={require('../../../app-data/img/default.png')}
                    alt="ad-img"
                    className="img-fluid rounded"
                    src={propImg}
                />
    );
}

export default AdImg;

问题是当这个组件渲染时它不会显示占位符，直到它渲染实际图像。

如何设置默认占位符图像，以便在呈现实际图像之前显示占位符？

【问题讨论】：

标签： javascript reactjs image lazy-loading

【解决方案1】：

这样的东西应该可以工作

export default function App() {
  const [isLoading, setIsLoading] = useState(true);

  function onLoad() {
    // delay for demo only
    setTimeout(() => setIsLoading(false), 1000);

   // setIsLoading(false)
  }

  return (
    <>
      <img
        alt="ad-img"
        width={300}
        src="https://via.placeholder.com/300x200/FF0000"
        style={{ display: isLoading ? "block" : "none" }}
      />
      <img
        alt="ad-img"
        width={300}
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1hIjBaj0A0XNB_xAozRAcFs6Gr0DQhWTGiQ&usqp=CAU"
        style={{ display: isLoading ? "none" : "block" }}
        onLoad={onLoad}
      />
    </>
  );
}

...我们正在显示 2 个图像，占位符和实际图像。在加载实际图像时，我们将显示占位符，当加载时，我们将隐藏占位符并显示实际图像。

【讨论】：