React Props问题：直接引入图片正常，通过Props传递却报错？

这个问题核心是React打包工具（比如Webpack）对资源引用的静态处理逻辑导致的：

当你在Service组件里直接写require("../../images/project_management.jpg")时，Webpack在打包阶段就能识别到这个固定路径，会自动把图片复制到输出目录，并替换成打包后的正确URL。但如果通过props传递字符串路径，再用require(this.props.img)，Webpack没办法在打包时提前分析这个动态变量，自然找不到对应的资源模块。

下面给你几种可行的解决办法：

方法1：父组件提前解析资源，传递已处理的URL #

在Home组件里先通过require拿到图片的打包后地址，再传给Service组件：

// Home组件修改
import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';

// 先提前解析图片路径
const projectImg = require("../../images/project_management.jpg");

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" img={projectImg} />
        </div>
      </div>
    );
  }
}
export default Home;

然后Service组件直接使用传递过来的URL即可：

// Service组件修改
import React, { Component } from 'react';
import './Service.css';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={this.props.img} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

方法2：建立图片映射表，通过key传递资源 #

如果需要传递多个图片，可以提前把所有可能用到的图片统一映射，父组件传递标识key，子组件根据key获取对应URL：

先创建一个图片映射文件imageMap.js：

export const imageMap = {
  projectManagement: require("../../images/project_management.jpg"),
  // 可以添加更多图片映射
  // design: require("../../images/design.jpg")
};

Home组件传递key：

import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';
import { imageMap } from './imageMap';

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" imgKey="projectManagement" />
        </div>
      </div>
    );
  }
}
export default Home;

Service组件根据key获取图片：

import React, { Component } from 'react';
import './Service.css';
import { imageMap } from '../imageMap';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={imageMap[this.props.imgKey]} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

方法3：将图片放到public目录，使用绝对路径 #

如果你的项目是Create React App生成的，默认有public目录，可以把图片放到public/images下，然后直接用绝对路径传递：

Home组件代码：

<Service serviceName="Project Manager" img="/images/project_management.jpg" />

Service组件直接使用：

<img src={this.props.img} width="150" alt="Smiley face" />

这种方式不需要require，因为public目录下的资源会被直接复制到输出根目录，打包工具不会对它们做额外处理，直接用绝对路径就能访问。

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