React Native如何将数据库图片路径与require关联以加载图片？

React Native 里的 require 对路径有静态解析要求，直接把数据库返回的字符串路径传入 require 会失效——因为打包工具（比如Metro）在编译阶段需要确定所有要加载的本地资源，无法动态解析运行时的字符串。下面是两种可行的解决方案：

方案一：提前创建本地图片映射表 #

把所有可能用到的本地图片路径和对应的 require 结果做成映射对象，用数据库返回的路径作为键去匹配对应的资源：

// 定义所有本地图片的映射关系
const imageMap = {
  '../assets/servicesIcons/przyklad.png': require('../assets/servicesIcons/przyklad.png'),
  '../assets/servicesIcons/przyklad2.png': require('../assets/servicesIcons/przyklad2.png'),
  // 按需求添加其他图片路径
};

// 处理从数据库获取的数据
// 假设dbProducts是数据库返回的原始数组
const processedProducts = dbProducts.map(item => ({
  ...item,
  // 匹配映射表中的资源，找不到则用默认图兜底
  image: imageMap[item.image] || require('../assets/default.png')
}));

之后直接把 processedProducts 传给FlatList即可，你的Product组件不需要修改，因为image已经是require返回的资源对象了。

方案二：配置Metro支持半动态require #

如果本地图片数量较多，不想手动维护映射表，可以修改Metro配置，让它支持带静态前缀的动态路径：

1. 修改项目根目录的 metro.config.js：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    extraNodeModules: {
      assets: path.resolve(__dirname, './assets'),
    },
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
});

2. 封装一个动态获取图片的函数：

// 假设数据库返回的是相对于assets目录的路径，比如'servicesIcons/przyklad.png'
const getLocalImage = (relativePath) => {
  try {
    // 用静态前缀+动态路径的方式，让Metro能识别并打包对应资源
    return require(`../assets/${relativePath}`);
  } catch (error) {
    // 加载失败时返回默认图
    return require('../assets/default.png');
  }
};

// 处理数据库数据
const processedProducts = dbProducts.map(item => ({
  ...item,
  image: getLocalImage(item.image)
}));

注意：这种方式会让Metro打包所有符合../assets/*规则的图片，可能会增加安装包体积，需根据项目实际情况权衡使用。

额外说明 #

如果你的图片是远程网络图片（数据库返回的是URL字符串），只需修改Product组件中的Image组件：

<Image 
  style={styles.imageCointener} 
  source={typeof image === 'string' ? { uri: image } : image} 
/>

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