title: How to prevent broken image appearing while loading my real image from server in head
body: <p>I am working on an application front-end with HTML, CSS and JavaScript, all is fine but before the image is loaded in the header, the broken image icon appears first.</p>
  
  <p><a href="https://i.stack.imgur.com/HfpJS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HfpJS.png" alt="broken image"></a></p>
  
  <p>I want to add a background color in place of broken image till original image  is fully loaded.</p>