如何解决如何在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;
问题在于此组件渲染时直到渲染实际图像时才显示占位符。
如何设置默认的占位符图像,以便在显示实际图像之前显示占位符?
解决方法
类似的事情应该起作用
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张图片,占位符和实际图片。在加载实际图像时,我们将显示占位符,在加载占位符之后,我们将隐藏占位符并显示实际图像。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。