我通过这样的props渲染图像：
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 张图像，占位符和实际图像。在加载实际图像时，我们将显示占位符，加载后我们将隐藏占位符并显示实际图像。
