无法使用下一个图像包在 nextjs 中导入图像

Question

尝试了所有路径，但图像没有从图像文件夹本地导入。

错误 - “未找到模块：无法解析 '../images/banner1.jpg'”

访问 ImagesSlider.js 文件中的图像。 组件/横幅/Imageslider.js

ImagesSlider.js 文件

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

Answer 1

如果将图片添加到/static/，则无需通过导入加载图片

你可以这样使用<img src={require('./yourImage.jpg')} />

例子：

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