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

我使用以下道具渲染图像：

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;

功能AdImg（道具）{
常数mg=`http://localhost:5000/${props.img}`；
返回(
);
}
出口违约AdImg；

问题是，当该组件渲染时，它在渲染实际图像之前不会显示占位符

---

如何设置默认占位符图像，使其显示占位符，直到呈现实际图像？

类似的功能应该可以工作

导出默认函数App（）{
const[isLoading，setIsLoading]=useState（true）；
函数onLoad（）{
//仅用于演示的延迟
setTimeout（（）=>setIsLoading（false），1000）；
//setIsLoading（错误）
}
返回(
);
}

…我们将显示两幅图像，占位符和实际图像。当加载实际图像时，我们将显示占位符，当加载占位符时，我们将隐藏占位符并显示实际图像