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").on("click", function(){
    
    var imgPath = $(this).attr("data-image"); //grab image path from data attr
    if($('img.the_image').attr('src') != 'http://farm7.staticflickr.com/' + imgPath) {
    $(".loading").show(); //show loading gif
    $("img.the_image").hide(); //hide the img
     $("img.the_image").attr("src","http://farm7.staticflickr.com/"+imgPath).load(function() { 
            $(".loading").hide(); //hide loading gif
            $("img.the_image").show(); //show the newly loaded img
        });
    }
});



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