JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" data-index="0" value="Show 1" />
<input type="button" data-index="1" value="Show 2" />
<input type="button" data-index="2" value="Show 3" />
<img data-src="http://placekitten.com/300/300?" />
<img data-src="http://placekitten.com/400/400?" />
<img data-src="http://placekitten.com/500/500?" />
CSS
.div-as-image {
width: 600px;
height: 200px;
background-image: url(http://placekitten.com/1000/800);
display: none;
}
JavaScript
$('input').on('click', function (e) {
var $img = $('img').eq($(this).attr('data-index'));
$img.attr('src', $img.attr('data-src'));
});