Tengo un problema en el que mi intercambiador de imágenes no se muestra. tengo 4 imagenes:

 <img src="" alt="" class="main-hobby"> <div> <img class="image1" src="./Assets/slider-1.png" alt="person-learning-new-technology"> <img class="image2" src="./Assets/slider-2.png" alt="a-house"> <img class="image3" src="./Assets/slider-3.png" alt="person-playing-golf"> <img class="image4" src="./Assets/slider-4.png" alt="xbox-controller"> </div> </picture>

entonces quiero que .main-hobby muestre cada imagen durante 2 segundos.

aquí está mi javascript:

 const image2 = document.querySelector('.image2') const image3 = document.querySelector('.image3') const image4 = document.querySelector('.image4') const images = [image1, image2, image3, image4]; let index = 0; const mainHobby = document.querySelector('.main-hobby'); console.log(images); window.onload = function () { setInterval (change, 2000); } function change() { index > images.lenght ? index = 0 : index ++; mainHobby.src = images[index]; }

pero todo lo que veo es una caja negra.

aquí está el css si es necesario

 display: block; width: 70px; height: 70px; margin-bottom: 20%; }