create-react-app配置react-router-dom后，require加载图片报模块找不到

这个错误的核心原因是Webpack在打包时无法静态解析你动态拼接的图片路径，导致这些图片没有被正确打包到输出目录，运行时自然找不到对应的模块。下面给你几种可行的解决方案：

方案1：提前导入图片（最推荐） #

直接在组件顶部导入所有需要的图片，然后将导入后的变量存入state，这样Webpack能正确识别并处理这些资源：

import React, {Component} from 'react';
import { Carousel,Image } from 'react-bootstrap';
// 提前导入图片
import img1 from '../assets/images/img-1.jpg';
import img2 from '../assets/images/img-2.jpg';

class JumboBanner extends Component {
  constructor(props, context) {
    super(props, context);
    this.handleSelect = this.handleSelect.bind(this);
    this.state = {
      index: 0,
      direction: null,
      images : [
        {path: img1, body:{title:'This is title',text:'Kutchi Text'}},
        {path: img2, body:{title:'This is title',text:'Kutchi Text'}},
      ]
    };
  }

  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction,
    });
  }

  render() {
    const { index, direction,images } = this.state;
    const corouselItems = images.map((img, idx)=> (
      // 直接使用导入后的图片变量，无需require
      <Carousel.Item key={idx}>
        <Image className="d-block w-100" src={img.path}/>
      </Carousel.Item>
    ));
    return (
      <Carousel activeIndex={index} direction={direction} onSelect={this.handleSelect}>
        {corouselItems}
      </Carousel>
    );
  }
}
export default JumboBanner;

方案2：使用Webpack上下文require（适合图片较多的场景） #

如果你的图片数量很多，不想逐个导入，可以利用Webpack的require.context来批量管理图片资源：

import React, {Component} from 'react';
import { Carousel,Image } from 'react-bootstrap';

// 创建图片目录的上下文，参数分别是：目录路径、是否递归子目录、匹配的文件后缀
const imagesContext = require.context('../assets/images', false, /\.jpg$/);

class JumboBanner extends Component {
  constructor(props, context) {
    super(props, context);
    this.handleSelect = this.handleSelect.bind(this);
    this.state = {
      index: 0,
      direction: null,
      images : [
        {filename:'img-1.jpg', body:{title:'This is title',text:'Kutchi Text'}},
        {filename:'img-2.jpg', body:{title:'This is title',text:'Kutchi Text'}},
      ]
    };
  }

  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction,
    });
  }

  render() {
    const { index, direction,images } = this.state;
    const corouselItems = images.map((img, idx)=> (
      <Carousel.Item key={idx}>
        {/* 通过上下文动态获取图片 */}
        <Image className="d-block w-100" src={imagesContext(`./${img.filename}`)}/>
      </Carousel.Item>
    ));
    return (
      <Carousel activeIndex={index} direction={direction} onSelect={this.handleSelect}>
        {corouselItems}
      </Carousel>
    );
  }
}
export default JumboBanner;

方案3：将图片放到public目录（不推荐，仅作备选） #

把图片移动到public/assets/images目录下，然后直接使用绝对路径引用（无需require）：

// state里直接存绝对路径
images : [
  {path:'/assets/images/img-1.jpg', body:{title:'This is title',text:'Kutchi Text'}},
  {path:'/assets/images/img-2.jpg', body:{title:'This is title',text:'Kutchi Text'}},
]

// render时直接用src={img.path}
<Image className="d-block w-100" src={img.path}/>

⚠️ 注意：这种方式下Webpack不会对图片进行压缩、哈希命名等优化，所以仅适合不需要打包优化的大图片或特殊资源。

额外检查点 #

确认你的组件文件路径是否正确：如果JumboBanner.js在src/components目录下，那么../assets/images的相对路径是正确的（因为src/components的上一级是src，而assets在src目录下）。

内容的提问来源于stack exchange，提问作者ritesh sangani