React Native中使用require动态加载JPEG图片报错求助

你当前的用法不正确，React Native 的 require 函数不支持动态拼接路径。因为 Metro 打包器需要在编译阶段提前识别所有要打包的资源，动态生成的路径无法被打包器解析，所以会抛出报错。

可行的实现方案 #

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

手动维护一个文件名到 require 引用的映射对象，这是最稳妥的方式：

// 提前定义所有需要的图片映射
const imageAssets = {
  'avatar1': require('./assets/avatar1.jpg'),
  'avatar2': require('./assets/avatar2.jpg'),
  // 依次添加所有用到的图片
};

const StoriesView = ({ stories }) => {
  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.storiesScrollView}>
      <View style={styles.storiesContainer}>
        {stories.map((name, index) => (
          <Image
            key={index}
            style={styles.storyImage}
            source={imageAssets[name]}
          />
        ))}
      </View>
    </ScrollView>
  );
};

方案二：使用静态导入 + 数组匹配 #

如果图片数量较多，可以批量静态导入后，通过数组匹配对应资源：

// 静态导入所有图片
import avatar1 from './assets/avatar1.jpg';
import avatar2 from './assets/avatar2.jpg';

// 构建数组，包含文件名和对应的图片资源
const images = [
  { name: 'avatar1', source: avatar1 },
  { name: 'avatar2', source: avatar2 },
];

const StoriesView = ({ stories }) => {
  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.storiesScrollView}>
      <View style={styles.storiesContainer}>
        {stories.map((name, index) => {
          const image = images.find(item => item.name === name);
          return (
            <Image
              key={index}
              style={styles.storyImage}
              source={image?.source || require('./assets/default.jpg')} // 可选：添加默认图
            />
          );
        })}
      </View>
    </ScrollView>
  );
};

方案三：使用本地 URI 加载（需配置打包规则） #

如果图片数量极大，无法手动维护映射，可以将图片放在项目的特定目录，通过 URI 方式加载。需要先修改 metro.config.js 配置允许加载该目录的资源：

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

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: ['jpg', 'jpeg', 'png'], // 确保包含你的图片格式
  },
});

然后在组件中使用 URI 加载：

const StoriesView = ({ stories }) => {
  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.storiesScrollView}>
      <View style={styles.storiesContainer}>
        {stories.map((name, index) => (
          <Image
            key={index}
            style={styles.storyImage}
            source={{ uri: `assets/${name}.jpg` }}
          />
        ))}
      </View>
    </ScrollView>
  );
};

注意：这种方式需要确保图片被正确打包，且路径在不同平台（iOS/Android）下一致，部分场景可能需要调整 URI 前缀。

额外检查点 #

• 确认文件名大小写完全一致：Android 系统对文件名大小写敏感，iOS 不敏感，避免因大小写差异导致加载失败。
• 确保 assets 目录的相对路径正确：组件文件所在位置与 assets 的相对路径是否和代码中写的一致。

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