Images are common in web pages now a days. These images make the web page attractive and beautiful. But sometimes due to problems, some images won’t load completely. When the image doesn’t load completely, that image is said to be a broken image. When the image is broken, the Browser will replace that broken image with an ugly image or replace the broken image with a blank space. I have included a broken image below. Different Browsers will render the broken image in different ways.
What Causes a Broken Image ?
- Slow Internet Connection makes the image broken
- Image Does not exist (404)
- Image URL redirects to a non Image URL
- User stops the loading of the page.
Fix # 1
If you have a lot of images and need to apply an onerror attribute on each of them, it’s very difficult. If you want something like that, see Fix # 2.
Fix # 2
If you really need to do the task in jQuery, see Fix # 3.
Fix # 3
The following jQuery code will do the same function as Fix # 2.
In all of the fixes above, the path of the default image is :