我用这样的 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;
问题是当这个组件渲染它不显示占位符,直到它渲染实际的图像。
如何设置默认的占位符图像,使其在渲染实际图像之前显示占位符?
2条答案
按热度按时间nx7onnlm1#
像这样的东西应该管用
...我们将显示2个图像,占位符和实际图像。加载实际图像时,我们将显示占位符,加载后,我们将隐藏占位符并显示实际图像。
bf1o4zei2#
对我来说,只有在我将第二个图像样式(我们希望在加载后显示的样式)更改为
{visibility: loading ? 'hidden' : 'visible'}
后,它才起作用