React Native判断本地资源图片是否存在：invalid call错误排查与解决

问题原因 #

你写的代码使用了完全动态的require路径，打包工具（如Webpack、Vite）无法静态分析出需要预编译哪些图片文件，因此会抛出"invalid call"错误。打包工具要求require的路径必须包含固定前缀，不能完全通过变量动态拼接。

解决方法 #

根据你使用的打包工具，选择对应的方案：

方案1：Webpack环境（React、Vue2等）

先通过require.context预加载指定目录下的所有图片，再判断目标图片是否存在：

// 预加载指定目录的所有图片，可根据实际图片后缀调整正则规则
const localImages = require.context('../../assets/images/comman', false, /\.(png|jpg|jpeg|gif|svg)$/);

const getSource = (product: Product) => {
  // 检查本地是否存在对应图片
  if (localImages.keys().includes(`./${product.image}`)) {
    return localImages(`./${product.image}`);
  }
  // 本地不存在则返回服务器图片地址
  return `${DEFAULT_API_CONFIG.url}/view/${product.image}`;
};

方案2：Vite环境（Vue3、React等）

Vite不支持require.context，改用import.meta.glob预加载图片：

// 预加载指定目录的所有图片，eager设为true表示立即加载资源
const localImages = import.meta.glob('../../assets/images/comman/*', { eager: true, import: 'default' });

const getSource = (product: Product) => {
  const imagePath = `../../assets/images/comman/${product.image}`;
  // 检查本地图片是否存在
  if (localImages[imagePath]) {
    return localImages[imagePath] as string;
  }
  // 本地不存在则返回服务器图片地址
  return `${DEFAULT_API_CONFIG.url}/view/${product.image}`;
};

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