JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Click the image to toggle it:</h1>
<img id="ChangeImage" src="http://placekitten.com/200/300" />
CSS
h1 {
font-size: 34px;
padding: 20px;
font-weight: bold;
}
img {
display: block;
margin: 10px auto;
cursor: pointer;
}
JavaScript
var image1 = 'http://placekitten.com/200/300';
var image2 = 'http://placekitten.com/g/200/300';
$("#ChangeImage").click(function () {
$(this).prop('src', function (index, currentSource) {
return currentSource == image2 ? image1 : image2;
});
});