React Native如何基于JSON动态加载大量本地小图片？

Webpack 环境下的实现方式 #

Webpack在构建时需要明确依赖关系，直接用require(动态变量)无法识别，但可以通过上下文模块批量处理：

• 先创建匹配images文件夹所有png图片的上下文：

  const imagesContext = require.context('./images', false, /\.png$/);
  

• 接着导入你的公司数据JSON，遍历替换logo路径：

  import companies from './companies.json';
  
  const companiesWithLogos = companies.map(company => {
    // 从logo路径里提取文件名（比如从"./images/meta.png"取出"meta.png"）
    const fileName = company.logo.split('/').pop();
    // 通过上下文获取Webpack处理后的图片URL
    const logoUrl = imagesContext(`./${fileName}`);
    return { ...company, logo: logoUrl };
  });
  

这种方式能一次性捕获所有目标图片，完美适配100-1000张图片的批量加载需求。

Vite 环境下的实现方式 #

Vite原生支持import.meta.glob批量导入资源，操作更简洁：

• 先批量导入images下的所有png：

  const images = import.meta.glob('./images/*.png', { eager: true });
  

• 再结合JSON数据处理logo路径：

  import companies from './companies.json';
  
  const companiesWithLogos = companies.map(company => {
    // 匹配对应图片模块
    const logoModule = images[company.logo];
    return { ...company, logo: logoModule.default };
  });
  

• 注：{ eager: true }会在构建时加载所有图片；如果想优化初始加载速度，可去掉该选项，改为组件渲染时动态加载。

核心注意事项 #

• 确保JSON中的logo路径和实际文件路径完全一致，尤其是大小写（Linux/macOS环境下路径区分大小写）。
• 针对超大量图片，建议搭配懒加载策略，避免页面初始加载时间过长。

内容的提问来源于stack exchange，提问作者Patrik D.