In my application.cfc, within the 'onRequestStart' function, I have a variable defined for the replacement image to use in my site.
Then, in an include that puts special goodies into the head of every generated html page sitewide, I have this bit of cf code
<!--- missing img src --->
<cfif fileExists(expandPath(request.missingImage))>
<cfset imgErrorSrc = '#request.thisdir##request.missingImage#'>
<cfelse>
<cfset imgErrorSrc = ''>
</cfif>
This checks to make sure the 'error' image actually exists - if not, we just use a blank '' value.
(Note: request.thisDir is my own global variable that references the root of the site - you can replace that with any hardcoded or dynamic url)
Then, write a simple function to replace any images - this duplicates a similar usage of the ![]()
tag's 'onerror' attribute ( which is fine for images in non-strict doctypes, but is not entirely valid ).
<!--- replace all missing images with replacement image, or with empty src --->
<script type="text/javascript">
$(document).ready(function(){
$('body img').error(function(){
$(this).attr('src', '<cfoutput>#imgErrorSrc#</cfoutput>').attr('alt','');
});
});
</script>
That's it.
Also notice I am clearing the 'alt' attribute as a final precaution. Using this method, any missing image anywhere within the html
will simply be 'blanked out'.
I could use jQuery's .remove() function, to remove a missing image completely from the DOM, but there are times when I want the space or layout to be preserved, and really, I don't want errant images in my pages at all, so this gives me a way to debug if I find my self (inevitably) scratching my head when a missing image simply 'vanishes' from the page 4 or 5 sites from now.
As a final note, the CF part of this, setting the value for the 'src' attribute, can be enhanced to include different images for different pages, or under different conditions. Likewise, the jQuery function could be expanded to target images in one location with a specific action, and in another with a separate function by using different css selectors.
Just another example of how Jquery + CF = bliss :-)
