如何在渲染 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;

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

我如何设置默认占位符图像，以便它显示占位符直到呈现实际图像？

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

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

How to render default image before rendering the actual image in react js?

javascript

lazy-loading

image

reactjs