React中加载对象数组内本地图片报错：Cannot find module 求助

这个报错的核心原因是Webpack的静态打包机制导致的：你在Slider组件里用require(picture.src)的时候，picture.src是一个运行时才会确定的字符串，Webpack在编译阶段没办法静态解析这个动态路径，所以找不到对应的图片模块。

下面给你两种可行的解决方法：

方法一（推荐）：在图片数组中直接用require导入路径 #

修改你的SliderImgs.js文件，把图片路径用require提前导入，而不是存成字符串：

const Images=[ { src: require('./files/new-banner-high.jpg'), alt:'banner', order:'0' } ]
export default Images

然后在Slider组件里，直接使用picture.src作为图片的src属性即可，不需要再调用require：

<img src={picture.src} alt={picture.alt} key={index} />

这样Webpack在编译阶段就能正确识别到图片资源，把它打包到输出目录里，运行时就能正常加载了。

方法二：给Webpack明确的静态路径前缀（不推荐，可能增加打包体积） #

如果你想保留字符串路径的写法，可以修改Slider组件里的require调用，给Webpack一个静态可解析的目录前缀：

<img 
  src={require(`./files/${picture.src.split('./files/')[1]}`)} 
  alt={picture.alt} 
  key={index} 
/>

这种写法会让Webpack提前把./files/目录下的所有图片都打包进去（不管有没有用到），所以可能会导致打包体积变大，因此更推荐第一种方法。

另外，你的Slider组件里用getDerivedStateFromProps来同步props到state其实是没必要的，直接在render里使用this.props.pictures就可以了，这样代码更简洁：

render() {
  return (
    <div className="slidercontainer">
      {this.props.pictures.map((picture, index)=> {
        return(
          <img src={picture.src} alt={picture.alt} key={index} />
        )
      })}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Pedrum B.