React中使用传入Prop时require()方法失效问题求助

问题描述 #

我正在构建一个作品集网站，当前制作用于承载图片和文本的项目卡片组件。从父组件传入图片路径作为prop（thumbnail），console.log显示thumbnail值为"../assets/project1.png"，但使用require('' + thumbnail)加载图片时失效，直接写require("../assets/project1.png")却能正常加载。

代码示例 #

import React from "react";

const ProjectCard = (props) => { 

    const {title , context, thumbnail, date, skillset, website} = props;
    console.log(thumbnail == "../assets/project1.png") // 输出true
    return (
        <section id="">
            <div className="card" style={{width: '18rem'}}>
                <img className="col-12" src={require('' + thumbnail)} alt=""/> {/* 失效 */}
                <img className="col-12" src={require("../assets/project1.png")} alt=""/> {/* 正常加载 */}
                <div className="card-body">
                    <h5 className="card-title">{title}</h5>
                    <p className="card-text">{date}</p>
                </div>
            </div>
        </section>
    )
}

export default ProjectCard;

原因分析 #

核心在于Webpack的静态编译机制：

• require是Webpack的模块加载语法，它在编译阶段就需要明确知道具体的文件路径，才能将对应的图片资源打包到输出目录，并替换为编译后的资源路径。
• 当你使用require('' + thumbnail)时，thumbnail是组件运行时才从父组件传入的prop值，Webpack在编译阶段无法预知这个变量对应的具体文件，因此无法完成资源的打包和路径替换，最终导致图片加载失败。
• 而直接写require("../assets/project1.png")是静态字符串，Webpack编译时可以直接定位到该文件，处理后生成正确的资源路径，所以能正常显示。

解决方案 #

方案1：提前导入+映射表（推荐） #

提前导入所有可能用到的图片，通过对象映射路径与图片模块的关系：

import React from "react";
// 提前导入所有项目图片
import project1 from "../assets/project1.png";
import project2 from "../assets/project2.png";

// 建立路径到图片模块的映射
const imageMap = {
  "../assets/project1.png": project1,
  "../assets/project2.png": project2
};

const ProjectCard = (props) => { 
    const {title, thumbnail, date} = props;
    return (
        <section>
            <div className="card" style={{width: '18rem'}}>
                <img className="col-12" src={imageMap[thumbnail]} alt="项目缩略图"/>
                <div className="card-body">
                    <h5 className="card-title">{title}</h5>
                    <p className="card-text">{date}</p>
                </div>
            </div>
        </section>
    )
}

export default ProjectCard;

方案2：将图片放入public目录 #

如果把图片移到项目的public/assets/目录下，可以直接用传入的路径作为src，无需使用require：

// 假设图片路径改为"/assets/project1.png"（相对于public目录）
<img className="col-12" src={thumbnail} alt="项目缩略图"/>

public目录下的资源会被Webpack直接复制到打包后的根目录，运行时可通过路径直接访问。

方案3：动态import（适合大量图片场景） #

通过import()函数在运行时动态加载图片：

import React, { useState, useEffect } from "react";

const ProjectCard = (props) => { 
    const {title, thumbnail, date} = props;
    const [imageSrc, setImageSrc] = useState('');

    useEffect(() => {
        // 动态导入图片资源
        import('' + thumbnail)
            .then(module => setImageSrc(module.default))
            .catch(err => console.error("图片加载失败", err));
    }, [thumbnail]);

    return (
        <section>
            <div className="card" style={{width: '18rem'}}>
                {imageSrc && <img className="col-12" src={imageSrc} alt="项目缩略图"/>}
                <div className="card-body">
                    <h5 className="card-title">{title}</h5>
                    <p className="card-text">{date}</p>
                </div>
            </div>
        </section>
    )
}

export default ProjectCard;

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