JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="centerkn">

<img id='test' src='https://cdn.pixabay.com/photo/2017/08/20/20/20/lamp-2663053_960_720.jpg'/ width="200">
  <label>
    <input type='radio' name='scr' value='/upload/connemarabrown.png'/><span></span>
  </label>

  <label>
    <input type='radio' name='scr' value='/upload/connemarablue.png'/><span></span>
  </label>

</div>

CSS

label {margin:0 auto;

    width: 32px;
    height: 26px;
    display: inline-block;
    position: relative;
   }
   input[type="radio"] + span {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(http://www.greveniotis.gr/images/icons/rss-icon.png) no-repeat;
    cursor: pointer;
   }
   input[type="radio"]:checked + span {
     position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(http://www.greveniotis.gr/images/icons/rss-icon.png) no-repeat;
    cursor: pointer; 
   }
  #centerkn{
    margin:0 auto;
    width:200px;
    text-align:center;
  }

JavaScript

$(document).ready(function (){
  $(':radio').click(function (){
    if (this.checked) {
      $('#test').attr('src',this.value);
    }
  });
});