JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <title>Image Error Fallback Test</title> 
    </head> 
    <body> 
        <!-- note that all the coupon_placementN.jpg files are not on the CDN,
        but instead are only located locally on the web server. In fact, all
        the images are located on the web server, but not all are on the CDN. --> 
        <img id="img1" src="http://cdn.lightsamerica.com/lofings/images/coupon_placement1.jpg" alt="Whoops"> 
        <img id="img2" src="http://cdn.lightsamerica.com/lofings/images/main_photo.jpg" alt="Whoops"> 
        <img id="img3" src="http://cdn.lightsamerica.com/lofings/images/24_7.jpg" alt="Whoops"> 
        <img id="img4" src="http://cdn.lightsamerica.com/lofings/images/coupon_placement2.jpg" alt="Whoops"> 
        <img id="img5" src="http://cdn.lightsamerica.com/lofings/images/coupon_placement3.jpg" alt="Whoops"> 
        <img id="img6" src="http://cdn.lightsamerica.com/lofings/images/main_photo3.jpg" alt="Whoops"> 
    </body> 
</html>

CSS

img { display: block; }

JavaScript

$(function() {
            /* the following error handler will only attach to #img1 in IE, but
             * will attach to #img1-#img6 in real web browsers
             */
            $("img").error(function(e) {
                /* an image URL on the CDN:
                 * http://cdn.lightsamerica.com/lofings/images/foo.jpg
                 * the same image URL on the web server:
                 * http://www.lofingslighting.com/e/images/foo.jpg
                 */
                this.src = this.src.replace("cdn.lightsamerica.com/lofings", "www.lofingslighting.com/e");
            });
        });