如何在Create React App中通过props动态设置组件背景图

import 属于ES6静态导入语法，编译阶段就需要确定导入路径，不支持运行时的动态变量/模板字面量，所以无法直接用来实现动态传值配置背景图，可采用以下两种方案实现需求：

方案1：将静态资源放在public目录下通过路径拼接实现 #

CRA会原样拷贝public目录下的所有资源，你可以把所有需要用到的背景图放在public下的统一目录（例如public/images/avatars/），直接通过props传递图片文件名拼接路径即可：

import '../css/Avatar.css';

const Avatar = (props) => {
    // props.imgName 为父组件传入的图片文件名，示例值："joe_exotic.jpg"
    const imgPath = `/images/avatars/${props.imgName}`;
    return (
        <div 
        style={{backgroundImage: `url("${imgPath}")`}}
        className="avatar">
        </div>
    )
}

export default Avatar;

• 注意点：如果项目部署在域名子路径下，路径拼接需要加上process.env.PUBLIC_URL，即const imgPath = ${process.env.PUBLIC_URL}/images/avatars/${props.imgName};
• 适用场景：图片数量多、需要完全动态配置的场景，不需要提前引入所有图片

方案2：用require动态引入src目录下的图片 #

如果图片存放在src目录下不想迁移到public，可以使用require配合带固定前缀的模板字面量实现动态引入：

import '../css/Avatar.css';

const Avatar = (props) => {
    // props.imgName 为父组件传入的图片文件名，示例值："joe_exotic.jpg"
    const photo = require(`../images/${props.imgName}`);
    return (
        <div 
        style={{backgroundImage: `url("${photo.default || photo}")`}}
        className="avatar">
        </div>
    )
}

export default Avatar;

• 注意点：require的模板字符串必须包含固定的路径前缀，不能是完全动态的变量，否则webpack无法匹配到对应的资源；部分webpack版本下require返回的是模块对象，需要取.default属性才是正确的图片路径，因此加了兼容判断
• 适用场景：图片数量可控的场景，webpack会自动打包../images/目录下所有图片到构建产物

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