React中使用Props传递本地图片路径时图片无法加载的解决方法

你的问题出在src目录下的图片资源引用方式：React项目中，直接用字符串拼接的相对路径（../../images/${img}）引用src内的图片时，webpack无法正确解析这个路径——因为编译后组件的文件结构会变化，webpack不会处理动态拼接的字符串路径，导致图片找不到。

下面是两种可行的解决方式：

方式一：通过import导入图片后传递props（推荐） #

和你导入star图片的逻辑一致，先在父组件（App.js）里导入目标图片，再把导入后的变量作为props传给Card组件：

修改App.js：

import './App.css';
import Nav from './Components/Nav/Nav';
import Card from './Components/Card/Card';
// 导入目标图片，注意路径要匹配你的项目结构（假设images在src根目录下）
import lessonImage from './images/image 12.png';

function App() {
  return (
    <div className="App">
      <Nav />
      <Card 
        img={lessonImage} // 传递导入后的图片变量
        rating="5.0"
        reviewCount={6}
        country="USA"
        title="Life Lessons with Katie Zaferes"
        price={136}
      />
    </div>
  );
}

export default App;

然后修改Card.js中的图片引用：

// ...其他代码
<img className="image" src={img} />
// ...其他代码

这种方式下，webpack会把图片作为资源模块处理，自动生成正确的编译后路径，确保图片能正常加载。

方式二：将图片放在public文件夹下使用绝对路径 #

如果不想用import的方式，可以把图片移动到项目根目录的public文件夹下（比如public/images/image 12.png），然后在Card组件中使用相对于网站根目录的绝对路径：

// Card.js中修改图片src
<img className="image" src={`/images/${img}`} />

public文件夹下的资源会被webpack直接复制到构建产物的根目录，不会被编译处理，所以可以通过/images/xxx.png这种绝对路径直接访问。

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