Для React проекта хочу использовать слайдер Swiper и столкнулся с проблемой - не отображаются картинки, которые мне надо, хотя в DOM появляются

компонент, который я использую

<Swiper>
    {picture.map(item => (
      <SwiperSlide key={item.id}>
        <div className={style.imgBox}>
          <img src={item.pic} className={style.img1} />
        </div>
      </SwiperSlide>
    ))}
  </Swiper>

Путь к фото хранится в отдельном файле - массив объектов Сами фото лежат в папке img, пример "pic": "./img/u1/1.jpg"