html img hide broken icon, show alt

Question

Do you know how to hide the classic “Image not found” or broken icon, but the alt still exist from a rendered HTML page when an image file is not found? Like this, <img id="testImg" src="#" alt="No Image"/> :

change to: No Image (show the alt only)

Any working method using JavaScript/jQuery/CSS? Thank's

Answer 1

You can try this

1. Create a text node element based on the alt text
2. Insert the text node before the img
3. Remove the img, or hide it if you want

function doSomething(elem){
  var alt = document.createTextNode( elem.getAttribute('alt') );
  
  elem.parentNode.insertBefore( alt, elem );
  
  elem.parentNode.removeChild( elem );
}

<img src="actual_image_src"  alt="helloworld" onerror="doSomething(this)" />