JSFiddle - React, Tailwind, and code Playground

HTML

<!--JS Method-->
<h1>With JavaScript</h1>
<input type="checkbox" id="check1" name="check1">
<label for="check1">New Images</label>
<br>
<img src="https://i.picsum.photos/id/896/200/200.jpg?hmac=GtnSTSOmlmBRvu2fpraj0-9azTBV0t32V07JLyAVPhM" id="image1">

<!--CSS Method-->
<h1>With CSS</h1>
<input type="checkbox" id="check2" name="check2">
<label for="check2">New Image</label>
<br>
<div id="image2"></div>

CSS

/* CSS Method */
#image2 {
  width: 200px;
  height: 200px;
  background: url(https://i.picsum.photos/id/896/200/200.jpg?hmac=GtnSTSOmlmBRvu2fpraj0-9azTBV0t32V07JLyAVPhM) no-repeat;
  background-size: contain;
}

#check2:checked ~ #image2 {
  background: url(https://i.picsum.photos/id/859/200/200.jpg?hmac=vEU-8IgIt_Q7UmUqqkedPnQX0g_C-6w4WPB2VHTzfgg) no-repeat;
}

JavaScript

//JS Method
var check = document.getElementById("check1");
var image = document.getElementById("image1")

check.oninput = function() {
  if (check.checked) {
    image.setAttribute("src", "https://i.picsum.photos/id/859/200/200.jpg?hmac=vEU-8IgIt_Q7UmUqqkedPnQX0g_C-6w4WPB2VHTzfgg");
  } else {
    image.setAttribute("src", "https://i.picsum.photos/id/896/200/200.jpg?hmac=GtnSTSOmlmBRvu2fpraj0-9azTBV0t32V07JLyAVPhM");
  }
}