<div class="wrapper">
    <div class="block">
    <div class="pic">
  <img src="https://cspromogame.ru//storage/upload_images/avatars/852.jpg">
</div>

<button data-src="https://cspromogame.ru//storage/upload_images/avatars/3884.jpg" class="active">
  Blue
</button>

<button data-src="https://cspromogame.ru//storage/upload_images/avatars/750.jpg">
  Black
</button>
  </div>
    <div class="block">
    <div class="pic">
  <img src="https://cspromogame.ru//storage/upload_images/avatars/852.jpg">
</div>

<button data-src="https://cspromogame.ru//storage/upload_images/avatars/3884.jpg" class="active">
  Blue
</button>

<button data-src="https://cspromogame.ru//storage/upload_images/avatars/750.jpg">
  Black
</button>
  </div>
      <div class="block">
    <div class="pic">
  <img src="https://cspromogame.ru//storage/upload_images/avatars/852.jpg">
</div>

<button data-src="https://cspromogame.ru//storage/upload_images/avatars/3884.jpg" class="active">
  Blue
</button>

<button data-src="https://cspromogame.ru//storage/upload_images/avatars/750.jpg">
  Black
</button>
  </div>
</div>

.pic {
  display: inline-block;
}

img {
  height: 200px;
}

button {
  padding: 1em;
}

button.active {
  background: #525252;
}

document.body.addEventListener('click', e => {
  if (!e.target.matches('button')) return
  document.querySelector('.pic img').src = e.target.dataset.src
  
  document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
  e.target.classList.add('active')
})