How To Render Default Image Before Rendering The Actual Image In React Js?
I render image by props like this : function AdImg(props) { const propImg = `http://localhost:5000/${props.img}`; return ( ![]()
Solution 1:
Something like this should work
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}
/>
</>
);
}
...we're displaying 2 images, the placeholder and the actual image. While the actual image is loading, we're going to display the placeholder, when its loaded we're going to hide the placeholder and show the actual image.
Post a Comment for "How To Render Default Image Before Rendering The Actual Image In React Js?"