React：加载图像之前的图像大小问题

Posted 2023-03-05

【中文标题】React：加载图像之前的图像大小问题

【英文标题】：React : Issue with image size before image loaded

【发布时间】：2021-04-23 01:11:16

【问题描述】：

我正在显示来源来自 URL 的图像。这些图像有不同的尺寸。这些图像位于div 中，它们具有响应性，并且为了使图像尽可能适合，它们的宽度为 100%。到目前为止，一切顺利。

问题是在加载图像时，由于它来自 URL，它可能需要一点时间，在加载之前它占用 0x0 像素，因此我的 div 不可见，这导致我在图像之前显示问题已加载。 （你明白我的意思吗？）

事实上，最好有一个与要加载的图像大小相同的占位符。或者我想知道获取图像的大小然后构建div是否会更好？ （但是如何在渲染中做到这一点？）或者，我应该使用延迟加载组件吗？ （目前，我还没有找到一个能够在加载之前设法占用我的图像大小的工具）。

【参考方案1】：

这样的东西应该可以工作：Source

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

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

   // setIsLoading(false)
  

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

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

【讨论】：

嗨华金，感谢您的快速回复。但问题是我不知道图像的尺寸和图像的尺寸不同。占位符需要具有相同的大小。