Javascript react中图像的慢速渲染

我有这种用户界面

因此，当你点击一些垂直的小瓷砖时，它会改变大图像的src。当这种情况发生时，我的图像渲染得很慢。是的，我在这里使用大图像，但用于测试目的。我想我也应该处理这个问题，并在图像完全准备好显示时显示图像

以下是一些代码示例：

垂直分量

<div>
    {images.map((img, index) => ( //images are coming from props
      <Button onClick={() => handleImageChange(index)}>
         <Img src={img}/>
       </Button>
    ))}
</div>

<div>
   {images.length ? ( //images coming from props
      <Img src={images[activeImageIndex]}/>
   ) : (
      <Skeleton variant="rect" animation="wave"/>
   )}
</div>

所以问题是，当图像完全准备好时，如何显示图像

---

PS：我正在使用react image for Img component

您可能希望查看类似的内容，它将创建小的占位符图像，直到图像加载。请参见：全部良好。但我试着听图像的加载，它被触发，然后图像开始慢慢地疼痛。所以它不起作用了

const activeImageIndex = useSelector((state) => state.gdp.activeImageIndex);
const handleImageChange = (index) => {
  dispatch(setActiveImageIndex(index));
};