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

Question

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

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;

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

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

标签： javascriptreactjsimagelazy-loading

Answer 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 个图像，占位符和实际图像。在加载实际图像时，我们将显示占位符，当加载时，我们将隐藏占位符并显示实际图像。