Olá, tudo bem?
Uma solução que achei foi essa (eu separei os robôs em uma pasta específica):
no html está assim:
         <section class="robotron">
            <img class="robo" src="./pack-robos/Robotron 2000 - Azul/robotron.png" alt="Robotron" id="robotron"/>
            <figcaption class="titulo">ROBOTRON <br />2000</figcaption>
         </section>e no JS foi assim:
const coresRobo = [
   "./pack-robos/Robotron 2000 - Amarelo/robotron.png",
   "./pack-robos/Robotron 2000 - Azul/robotron.png",
   "./pack-robos/Robotron 2000 - Branco/robotron.png",
   "./pack-robos/Robotron 2000 - Preto/robotron.png",
   "./pack-robos/Robotron 2000 - Rosa/robotron.png",
   "./pack-robos/Robotron 2000 - Vermelho/robotron.png",
];
const roboClicavel = document.querySelector("#robotron");
roboClicavel.addEventListener("click", (evento) => {
   trocaCor(evento);
});
let i = 0;
function trocaCor(evento) {
   if (i==coresRobo.length) {
      i = 0;
      evento.target.src = coresRobo[i];
      i++;
   } else {
      evento.target.src = coresRobo[i];
      i++;
   }
} 
             
             
            