React子组件接收图片Prop后无法显示：模块找不到错误排查

问题原因 #

你当前写法中，子组件使用require(image)时，image是动态传入的字符串，而webpack在编译阶段无法解析完全动态的模块路径，导致找不到对应图片模块，从而抛出「Cannot find module '../images/blah-blah.jpg'」的错误。

解决方案 #

方案一：父组件提前导入图片，传递解析后的资源地址 #

1. 在父组件中先导入目标图片：

import profileImage from '../images/blah-blah.jpg';

2. 将导入后的资源直接传给子组件：

<ProfileCard 
   image={profileImage} 
   name='Name' 
   title='(CEO)'
/>

3. 子组件中直接使用传入的地址：

<Card.Img variant="top" src={image} /> 

方案二：固定路径前缀，仅动态传递文件名 #

如果需要动态切换不同图片，可以让父组件只传递文件名，子组件固定路径前缀：

1. 父组件传递文件名：

<ProfileCard 
   image='blah-blah.jpg' 
   name='Name' 
   title='(CEO)'
/>

2. 子组件中使用带固定前缀的动态require：

<Card.Img variant="top" src={require(`../images/${image}`)} /> 

这种写法webpack能识别路径范围是../images/，编译时会将该目录下的图片都打包进去，从而正确解析。

额外注意事项 #

• 确认图片文件名和后缀完全正确，注意大小写（比如.jpg和.JPG是不同的）
• 检查文件夹路径匹配性：从子组件ProfileCard.js所在的components目录到images目录，../images/这个路径是正确的

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