JSFiddle - React, Tailwind, and code Playground

HTML

<button class="image1" data-image="6061/6089964557_cb5c5bea9a_n.jpg">Image 1</button>
<button class="image2" data-image="6070/6089968449_4053c938ea_n.jpg">Image 2</button>
<button class="image3" data-image="6181/6090513562_00d4719dda_n.jpg">Image 3</button>
<button class="off">Hide Image</button>
<img src="http://farm7.staticflickr.com/6061/6089964557_cb5c5bea9a_n.jpg" style="display:block;" class="the_image" />
<img src="http://logd.tw.rpi.edu/files/loading.gif" style="display:none;" class="loading" />

CSS

.image {
    position:relative;
    width:320px;
    height:213px;
}

JavaScript

$("button").not("off").bind("click", function () {

    var imgPath = $(this).attr("data-image"); //grab image path from data attr
    var newImgPath = 'http://farm7.staticflickr.com/' + imgPath;

    if ($('img.the_image').attr('src') != newImgPath) {

        $(".loading").show(); //show loading gif
        $("img.the_image").hide(); //hide the img

        $("img.the_image").attr("src", newImgPath);
    }

});

$("img.the_image").load(function () {
    console.log('load handler');
    $(".loading").hide(); //hide loading gif
    $("img.the_image").show(); //show the newly loaded img
});

$("button.off").bind("click", function () {
    $("img").hide();
});