JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Выберите обложку</h1>

<div class="wr">
  <a href="#">
    <img class="fruit" src="https://st.weblancer.net/download/673256_935xp.png" alt="">
  </a>
  <a href="#">
    <img class="fruit" src="https://kot.sh/sites/default/files/styles/large/public/articles-image/25-prost-banana-preview.jpg?itok=fwYNew5Q" alt="">
  </a>
  <a href="#">
    <img class="fruit" src="https://delikates.ua/images/product/grusha.jpg" alt="">
  </a>
</div>

<h2>Обложка</h2>
<div class="picture"></div>

CSS

.wr {
  display: flex;
}

img {
  width: 100px;
}

.picture {
  width: 200px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
}

JavaScript

const fruits = document.querySelectorAll('.fruit');
const picture = document.querySelector('.picture');

fruits.forEach(_ => {
  _.addEventListener('click', function() {
  	const src = this.getAttribute('src');
    picture.style.backgroundImage = `url('${src}')`;
  });
});