how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]

by

I think this is very nice and short

<img src="https://stackoverflow.com/questions/3984287/imagenotfound.gif" alt="Image not found" onerror="this.src="imagefound.gif";" />

But, be careful. The user’s browser will be stuck in an endless loop if the onerror image itself generates an error.

EDIT
To avoid endless loop, remove the onerror from it at once.

<img src="https://stackoverflow.com/questions/3984287/imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src="imagefound.gif";" />

By calling this.onerror=null it will remove the onerror then try to get the alternate image.

NEW
I would like to add a jQuery way, if this can help anyone.

<script>
$(document).ready(function()
{
    $(".backup_picture").on("error", function(){
        $(this).attr('src', './images/nopicture.png');
    });
});
</script>

<img class="backup_picture" src="https://stackoverflow.com/questions/3984287/./images/nonexistent_image_file.png" />

You simply need to add class=”backup_picture” to any img tag that you want a backup picture to load if it tries to show a bad image.

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. How do I make two images fade in/out repeatedly? [closed]
  3. how to proportionally scale a div with images inside?
  4. Programmatically change the src of an img tag
  5. Resize image with javascript canvas (smoothly)
  6. Should setting an image src to data URL be available immediately?
  7. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  8. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  9. execute function after complete page load [duplicate]
  10. Dynamically resizing Image-maps and images
  11. Detecting WebP support
  12. Disable dragging an image from an HTML page
  13. How do image preloaders work?
  14. Adding images to an HTML document with JavaScript
  15. How do I abort image load requests without using window.stop()
  16. Load image from url and draw to HTML5 Canvas
  17. Make image fill div completely without stretching
  18. img onload doesn’t work well in IE7
  19. How to download a base64-encoded image?
  20. How to flip images horizontally with HTML5
  21. Change image in HTML page every few seconds
  22. Is there a way to load images to user’s cache asynchronously?
  23. JavaScript: Get image dimensions
  24. Sort by image resolution in gallery
  25. Is it necessary to set onload function before setting src for an image object?
  26. createImageBitmap alternative on Safari
  27. How to bind img src to data in Vue
  28. Center an Image vertically and horizontally using CSS
  29. canvas- Cropping images in different shapes
  30. Using base64-encoded images with HtmlService in Apps Script

Leave a Comment