On a daily basis I automatically imported several XML-feeds (Tradetracker, Daisycon, etc.) for an affiliate site using PHP. The feeds contain products from all kinds of shops.

Everything works like a charm, with exception of the images. The images in the feeds are simply hotlinked to an image of the provider. This works in most of the cases, however sometimes (due to various reasons) the image doesn't exist anymore, is hotlink protected, is changed, etc. etc. This results in "image not found" in the browser, which doesn't look good.

I tried to solve this using htaccess, but for whatever reason, it doesn't work. I googled and tried several htacces "scripts", but none without success. I also tried JS in the image URL but this didn't work eiter. I do prefer htaccess.

Anyone has a suggestion?

Replace image using htaccess

RewriteEngine on
<FilesMatch ".(jpg|png|gif)$">
ErrorDocument 404 "/noimage.jpg"
</FilesMatch>

Using JS

<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'">

Update: Working Version

<script type="text/javascript"> 
   jQuery(window).load(function() { 
      jQuery("img").each(function(){ 
         var image = jQuery(this);             
         if(image.context.naturalWidth == 0 ||
         image.readyState == 'uninitialized'){    
            jQuery(image).unbind("error").attr(
                "src", "noimage.jpg"
            ); 
         } 
    }); 
}); 
</script>

On a daily basis I automatically imported several XML-feeds (Tradetracker, Daisycon, etc.) for an affiliate site using PHP. The feeds contain products from all kinds of shops.

Everything works like a charm, with exception of the images. The images in the feeds are simply hotlinked to an image of the provider. This works in most of the cases, however sometimes (due to various reasons) the image doesn't exist anymore, is hotlink protected, is changed, etc. etc. This results in "image not found" in the browser, which doesn't look good.

I tried to solve this using htaccess, but for whatever reason, it doesn't work. I googled and tried several htacces "scripts", but none without success. I also tried JS in the image URL but this didn't work eiter. I do prefer htaccess.

Anyone has a suggestion?

Replace image using htaccess

RewriteEngine on
<FilesMatch ".(jpg|png|gif)$">
ErrorDocument 404 "/noimage.jpg"
</FilesMatch>

Using JS

<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'">

Update: Working Version

<script type="text/javascript"> 
   jQuery(window).load(function() { 
      jQuery("img").each(function(){ 
         var image = jQuery(this);             
         if(image.context.naturalWidth == 0 ||
         image.readyState == 'uninitialized'){    
            jQuery(image).unbind("error").attr(
                "src", "noimage.jpg"
            ); 
         } 
    }); 
}); 
</script>

• javascript
• image
• .htaccess
• http-status-code-404

• Handy solution, well done! – OverlappingElvis Commented Jan 30, 2014 at 17:19

1 Answer 1

jQuery supports the error event for images — I'm not sure why your inline example isn't working, but how about:

$('img').on('error', function() {
    $(this).attr('src', 'default.jpg');
});

This also has the advantage of not needing to be added to each element. Your .htaccess solution doesn't work if your images are being hotlinked, since those would not be served from your site.