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

exportdefaultfunctionApp() {
  const [isLoading, setIsLoading] = useState(true);

  functiononLoad() {
    // delay for demo onlysetTimeout(() =>setIsLoading(false), 1000);

   // setIsLoading(false)
  }

  return (
    <><imgalt="ad-img"width={300}src="https://via.placeholder.com/300x200/FF0000"style={{display:isLoading ? "block" : "none" }}
      /><imgalt="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.

Share