React Native中如何显示动态图片？动态路径调用报错求解

React Native 打包工具（如Metro）在构建时需要提前识别静态资源路径，完全动态拼接的字符串路径无法被打包工具解析，所以直接用require({img})会报错。以下是几种可行的解决方案：

方案1：预定义图片映射表 #

提前把所有可能用到的图片通过require导入，存入一个对象，再通过动态key获取对应图片：

// 定义图片映射
const ImageAssets = {
  home: require('./path/to/home.jpg'),
  profile: require('./path/to/profile.jpg'),
  settings: require('./path/to/settings.jpg')
};

// 动态获取图片（img为你传入的key，比如'home'）
const targetImage = ImageAssets[img];

return (
  <View>
    <Image source={targetImage} />
  </View>
);

方案2：条件判断加载 #

如果图片数量不多，可通过switch/if-else直接匹配加载：

let targetImage;
switch(img) {
  case 'home':
    targetImage = require('./path/to/home.jpg');
    break;
  case 'profile':
    targetImage = require('./path/to/profile.jpg');
    break;
  default:
    // 加载默认图片
    targetImage = require('./path/to/default.jpg');
}

return (
  <View>
    <Image source={targetImage} />
  </View>
);

方案3：使用URI加载本地资源 #

若图片放在项目的assets目录并配置好打包规则，可通过uri直接指定路径（需注意平台差异），但必须设置图片宽高：

import { Platform } from 'react-native';

// img为文件名（如'home'）
const imageUri = Platform.OS === 'android'
  ? `file:///android_asset/${img}.jpg`
  : `${img}.jpg`;

return (
  <View>
    <Image 
      source={{ uri: imageUri }} 
      style={{ width: 100, height: 100 }} // 必须设置宽高
    />
  </View>
);

注意事项 #

• 动态路径不能完全动态拼接，Metro需要提前明确知道资源位置，因此方案1/2是最可靠的本地动态图片加载方式。
• 使用URI方式时，必须给Image组件设置固定宽高，否则图片无法显示。
• 远程图片直接使用source={{ uri: 'https://xxx.com/image.jpg' }}即可，无需require。

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