create-react-app环境下通过props设置img的src属性报错如何解决？

create-react-app基于webpack构建，require()是编译阶段执行的静态解析指令，如果传入完全动态的路径参数，webpack无法在编译时识别匹配对应的资源文件，就会抛出模块找不到的报错。

方案1：父组件提前引入资源后传参（最稳妥，推荐） #

所有图片资源在父组件提前通过import/require引入后，再作为props传给子组件，子组件无需二次处理直接使用即可。

App组件代码示例： #

import React from 'react';    
import ProjectCard from './components/ProjectCard/';
// 提前引入图片资源
import projectImg from '../../images/image.jpg';

const App = () => (
    <ProjectCard image={projectImg} />
);

export default App;

ProjectCard组件代码示例： #

import React from 'react';

const ProjectCard = (props) => (
    <div>
        <img src={props.image} alt="项目展示" />
    </div>
);

export default ProjectCard;

方案2：资源放入public文件夹用公共路径加载（适合大量图片场景） #

将所有项目图片放到项目根目录的public文件夹下（比如public/images/），直接通过公共路径引用，无需编译阶段解析。

App组件代码示例： #

import React from 'react';    
import ProjectCard from './components/ProjectCard/';

const App = () => (
    <!-- 传相对于public文件夹的路径 -->
    <ProjectCard image="/images/image.jpg" />
);

export default App;

ProjectCard组件代码示例： #

import React from 'react';

const ProjectCard = (props) => (
    <div>
        <img src={process.env.PUBLIC_URL + props.image} alt="项目展示" />
    </div>
);

export default ProjectCard;

方案3：固定路径前缀的动态require（适合路径前缀统一的场景） #

如果必须使用动态require，需要将路径前缀固定写在require的模板字符串中，仅将文件名作为动态参数传入，给webpack明确的资源扫描范围。

ProjectCard组件代码示例： #

import React from 'react';

const ProjectCard = (props) => (
    <div>
        <!-- 路径前缀固定写死，仅文件名动态传入 -->
        <img src={require(`../../images/${props.imageName}`).default} alt="项目展示" />
    </div>
);

export default ProjectCard;

App组件代码示例： #

import React from 'react';    
import ProjectCard from './components/ProjectCard/';

const App = () => (
    <!-- 仅传文件名即可 -->
    <ProjectCard imageName="image.jpg" />
);

export default App;

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