Untitled

<head>
        <meta charset="utf-8">
    </head>
    <body>
        <center>
            <input type="button" value = "Показать картинку" onclick="showImg()"> <br/>
            <img src="" alt="Нажмите кнопку , чтобы посмотреть картинку" id = 'currentImg' >
        </center>

        <script >
        // массив с путями к картинкам (какие угодно напихай свои)
            const imgArr = [
                            './img/1.jpg',
                            './img/2.jpg',
                            './img/3.jpg',
                            './img/4.jpg',
                            './img/5.jpg',
                        ]
        // получаем узел img наш
            const imgElem = document.getElementById('currentImg')
        // начальный индекс в массиве с путями к картинка 0 , картинка './img/1.jpg'
            currentImgIndex = 0;

            function showImg(){
                // сначала проверяеем , не превышает ли наш текущий индекс длину массива
                    if (currentImgIndex == imgArr.length  ) { alert('Картинки закончились!') ; return;}
                // если все ок , ставм путь по индексу из массива в наш атрибут src тега img
                    imgElem.setAttribute('src' , `${imgArr[currentImgIndex]}`);
                // ну и , увеличиваем индекс. Чтобы при следующем вызове функции показывалась другая картинка
                    currentImgIndex += 1;
            }
         </script>
    </body>
</html>