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

xytpbqjk 于 2023-01-11 发布在 Java

关注(0)|答案(2)|浏览(162)

我用这样的 prop 渲染图像：

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

来源：https://stackoverflow.com/questions/63896591/how-to-render-default-image-before-rendering-the-actual-image-in-react-js

2条答案

按热度按时间

nx7onnlm1#

像这样的东西应该管用

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