ReactJS父组件传递src时图片无法显示问题排查

这种情况我之前也碰到过，大概率是你在ImageComponent里处理图片路径的方式不对，咱们一步步拆解问题：

核心原因 #

当你在Control组件里直接写<img src={require('./myImage.png')} />或者用import导入后使用时，Webpack会在编译阶段自动处理这个资源路径，把它替换成最终的静态文件路径（也就是你看到的static/media/myImage.png）。但如果你的ImageComponent只是直接把this.props.source这个字符串塞给img的src属性，就会踩坑：普通字符串形式的路径不会被React/Webpack自动解析为有效的资源引用，只有经过import/require处理过的模块路径才会被正确识别。

可行的解决方法 #

• 方法一：父组件先导入图片再传递
  不要直接传字符串路径，而是先把图片作为模块导入Control组件，再传给ImageComponent：

  // Control组件内
  import myImage from './myImage.png';
  
  <ImageComponent source={myImage} />
  

  然后在ImageComponent里正常使用：

  // ImageComponent组件内
  <img src={this.props.source} alt="" />
  

  这样Webpack会全程处理资源引用，确保路径有效。

• 方法二：在ImageComponent内动态用require解析
  如果你的场景必须传字符串路径（比如路径来自后端接口），可以在ImageComponent里用require动态加载：

  // ImageComponent组件内
  // 注意这里的相对路径要匹配你的项目文件结构
  const imageSrc = require(`../${this.props.source}`);
  <img src={imageSrc.default} alt="" />
  

  一般默认的Webpack配置都支持这种动态require的写法，能正确解析路径。

• 方法三：针对public文件夹资源的绝对路径写法
  如果你的图片是放在项目的public文件夹下的，那可以给路径加上根目录斜杠，用绝对路径访问：

  // ImageComponent组件内
  <img src={`/${this.props.source}`} alt="" />
  

  因为public文件夹下的资源会被直接复制到编译后的根目录，绝对路径能让浏览器直接找到资源。

为什么Control里直接写img能显示？ #

因为你在Control里直接写<img src={require('./myImage.png')} />时，Webpack在编译阶段就已经把这个路径解析成了最终可访问的静态资源URL；而传递给ImageComponent的只是一个普通字符串，没有经过Webpack的资源解析流程，浏览器自然找不到对应的文件。

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