Unable to import images in nextjs using next images package

Tried every path but the images are not importing locally from images folder.

Error - "Module not found: Can't resolve '../images/banner1.jpg'"

Accessing images in ImagesSlider.js file. components/Banner/Imageslider.js

ImagesSlider.js file

 import Image from 'next/image';
 import Slider from "react-slick";

 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import banner1 from '.../images/banner1.jpg';
 import banner2 from '.../images/banner2.jpg';
 import banner3 from '.../images/banner3.jpg';
 import banner4 from '.../images/banner4.jpg';


   export default function ImageSlider() {

   var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
  };
  return (
   <Slider  {...settings}>

     <Image  className='rounder-md px-5' src={banner1} 
            width={700} height={400} />

    <Image className='rounder-md px-5' src={banner2} 
            width={700} height={400} />

    <Image className='rounder-md px-5' src={banner3} 
            width={700} height={400} />
    
    <Image className='rounder-md px-5' src={banner4} 
            width={700} height={400} />

   </Slider>
  )
  }


 .next.config.js file

    const withImages = require('next-images')
    module.exports = withImages({})