i'm having problem where my image swapper isn't showing. I have 4 images :

                <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>

so i want the .main-hobby to show each image for 2 seconds.

here is my 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];
}

but all i see is a black box.

heres the css if needed

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