在React Native中用对象管理本地图片资源是否可行？

第一个问题：动态变量能否作为require()路径？ #

是的，Webpack、Vite这类前端打包工具在编译阶段就需要确定require()的完整路径，无法解析包含动态变量的路径（比如require(../icons/${name}.png)）——因为工具没法提前预知所有可能的变量值，也就无法预打包对应的资源。

你的方案是否有性能问题？ #

你提到的把所有图片的require()封装到一个对象中的方式，不会有运行时性能问题：打包工具会在编译阶段就处理好这些图片资源（包括哈希命名、压缩等），运行时只是读取对象中的资源引用，几乎没有额外开销。

但要注意：这种方式会让打包后的产物包含所有400多张图片，不管用户是否会用到，会直接增加初始包的体积，可能导致页面首次加载变慢。

更简便的替代方案 #

1. 用require.context批量生成引用（推荐，替代手动写400个require） #

如果你的图片都集中在同一个目录，命名规则统一，可以用打包工具提供的require.context自动批量导入，不用手动逐个写require()：

// 在单独的图标配置文件（比如icons.js）中
const iconContext = require.context('../icons', false, /\.(png|svg|jpg)$/);
const icons = {};

// 遍历所有匹配的图片文件
iconContext.keys().forEach(filePath => {
  // 提取文件名作为对象的key（比如把 './icon_1.png' 转为 'icon_1'）
  const iconKey = filePath.match(/^\.\/(.*?)\.\w+$/)[1];
  icons[iconKey] = iconContext(filePath);
});

export default icons;

之后在主代码中导入这个对象，直接通过icons.icon_1获取图片资源即可，维护成本低很多。

2. 按需动态加载（优化初始包体积） #

如果不想把所有图片都打包进初始包，可以用import()语法实现按需加载，只有当用户触发对应操作时才加载图片：

// 定义加载函数
async function getIcon(iconName) {
  // 注意路径要保留固定前缀，让打包工具能识别需要打包的资源范围
  const module = await import(`../icons/${iconName}.png`);
  return module.default;
}

// 使用示例（比如用户点击按钮后加载）
document.getElementById('load-icon-btn').addEventListener('click', async () => {
  const iconSrc = await getIcon('icon_1');
  document.getElementById('target-img').src = iconSrc;
});

这种方式下，未被加载的图片不会占用初始包体积，而是在需要时才从服务器请求，适合图片数量多但用户不会全部用到的场景。

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