Подскажите в чем проблема. Ошибка ERR_FILE_NOT_FOUND при появлении картинки в окне

При нажатии на галерею изображений, должно всплывать фото в отдельном окне , но почему то при нажатии происходит ошибка ERR_FILE_NOT_FOUND

<div class="container-gallery">
        <div class="gallery">
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid3.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid4.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid5.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid6.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid2.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid7.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid8.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid9.jpg" width="220" height="162">
                </div>
            </div>
            <div class="gallary-item">
                <div class="gallary-icon">
                    <img src="./imagesAuto/rapid10.jpg" width="220" height="162">
                </div>
            </div>
        </div>
        <div class="pop-up">
            <span>&times;</span>
            <img src="./imagesAuto/rapid8.jpg">
        </div>
    </div>

css

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto
}

.gallery .gallary-item {
    width: 32% !important;
    float: none !important;
    margin: 0 0 14px !important;
}
.container-gallery .pop-up{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%; 
    display: none;
}
.container-gallery .pop-up img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50% );
}
.container-gallery .pop-up span{
    position: fixed;
    top: 10px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #fff;
    font-size: 50px;
    font-weight: 900;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    cursor: pointer;

}
.gallery .gallary-item img {
    display: block;
    width: 100%;
    border: none !important;
    border-radius: 4px;
    box-shadow: none;
    transition: all .2s ease-in-out;
}

js

document.querySelectorAll('.container-gallery .gallary-icon').forEach(img =>{
  img.onclick = () => {
    document.querySelector('.pop-up'). style.display = "block";
    document.querySelector(".pop-up img"). src = img.getAttribute('src');
  }
});

document.querySelector('.pop-up span').onclick = () => {
  document.querySelector('.pop-up'). style.display = "none";
}