Unable to import images in nextjs using next images package

Question

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({})

Ashok · Accepted Answer · 2021-06-11 15:06:07Z

2

There is no need to load the image via the import if you add the images to /static/

You can use like this <img src={require('./yourImage.jpg')} />

Example:

export default () => (
  <div>
    <img src={require('./images/your-image.jpg')} />
  </div>
);

answered Jun 11, 2021 at 15:06

Ashok

3,64918 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to import images in nextjs using next images package

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related