Send Email Notifications for Broken Images Using jQuery AJAX

It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken images.

The PHP

if(isset($_POST['image']))

{

$to = 'errors@yourdomain.com';

$from = 'automailer@yourdomain.com';

$subject = 'Broken Image';

$content = "The website is signaling a broken image!\n\nBroken Image Path:  ".stripslashes($_POST['image'])."\n\nReferenced on Page:  ".stripslashes($_POST['page']);

$result = mail($to,$subject,$content,'From: '.$from."\r\n");

die($result);

}

I keep the email short and to the point; it contains the broken image's src attribute and the page it was requested by.

The jQuery JavaScript

$(document).ready(function() {

$('img').error(function() {

$.post('ajax-image-error-jquery.php', { 

image: $(this).attr('src'), 

page: window.location.href 

}, function() { 

//hide the image? 

});

});

});

For every image, we listen for the error event. When a broken image is discovered, an AJAX request is sent to the above PHP script.

Of course, if the page experiences high traffic before you can fix the image path, you'll have quite a few emails. You may prefer to store the error in a database table and check that often.