React函数组件传Props动态加载图片失败求助

问题原因 #

Webpack编译时会静态分析资源依赖，require(./File/${user.profilePicture})这种动态拼接路径的写法，webpack无法提前确定具体文件，编译阶段不会将对应图片打包，导致运行时找不到资源。

可行解决方案 #

方案1：提前导入所有图片（适合图片数量少的场景） #

先把./File目录下的所有图片导入，建立文件名到图片路径的映射表，再通过文件名匹配获取路径：

// 提前导入所有需要的图片
import defaultAvatar from './File/default.jpg';
import userAvatar1 from './File/user1.jpg';
import userAvatar2 from './File/user2.png';

// 建立文件名与图片的映射
const imageMap = {
  'default.jpg': defaultAvatar,
  'user1.jpg': userAvatar1,
  'user2.png': userAvatar2
};

// 组件中使用
<img src={imageMap[user.profilePicture] || defaultAvatar} alt="用户头像" />

方案2：将图片移至public目录，使用绝对路径 #

把图片放到React项目的public/File目录下，直接通过绝对路径访问，无需使用require：

<img src={`/File/${user.profilePicture}`} alt="用户头像" />

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

方案3：用require.context批量导入（适合图片数量多的场景） #

借助webpack的require.contextAPI批量读取目录下的图片，自动生成映射：

// 创建图片上下文，指定目录、是否递归、匹配的文件后缀
const imageContext = require.context('./File', false, /\.(png|jpe?g|svg|gif)$/);

// 编写获取图片路径的函数
const getImageUrl = (filename) => {
  try {
    return imageContext(`./${filename}`);
  } catch (err) {
    // 文件不存在时返回默认图片
    return require('./File/default.jpg');
  }
};

// 组件中使用
<img src={getImageUrl(user.profilePicture)} alt="用户头像" />

注意事项 #

• 确保user.profilePicture返回的文件名和实际文件完全一致（包括大小写、后缀名），比如实际文件是UserAvatar.JPG，接口返回useravatar.jpg会导致匹配失败。
• 使用方案2时，路径不要加./，直接从根目录开始写。

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