JSFiddle - React, Tailwind, and code Playground

https://pt.stackoverflow.com/a/332240/6333

HTML

<select id="select-gabarito">
  <option value="https://via.placeholder.com/210x297/ff00ff/ffffff">#ff00ff</option>
  <option value="https://via.placeholder.com/210x297/00ffff/ffffff">#00ffff</option>
  <option value="https://via.placeholder.com/210x297/ff0000/ffffff">#ff0000</option>
  <option value="https://via.placeholder.com/210x297/00ff00/ffffff">#00ff00</option>
</select>

<hr>

<div class="paginas">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
  <img src="https://via.placeholder.com/210x297/"class="bg-page">
</div>

CSS

.paginas {
  display: flex;
  flex-direction: column;
  background-color: #CCC;
}

.bg-page {
  margin: 10px auto;
  width: 210px;
  height: 297px;
  outline: 1px solid #888;
}

JavaScript

let imagens = document.querySelectorAll(".bg-page");
let select = document.querySelector("#select-gabarito");

select.addEventListener("change", function() {
	let novo_src = this.value;
	imagens.forEach(function(img) {
  	img.src = novo_src;
  });
});