React Native中Image组件source属性动态加载本地图片报错

问题根源 #

React Native的Metro打包器在构建阶段会提前打包所有本地资源，require()的参数必须是静态字面量字符串，不能传入动态变量，这就是你遇到Invalid call at line 33: require(imageString)报错的原因。另外，{uri: 本地相对路径}的方式不被支持，因为React Native不会识别非原生资源目录的本地路径。

可行解决方案 #

方案1：提前构建图片映射表（推荐） #

把所有需要用到的本地图片提前用require()导入，构建一个键值对映射表，通过props传递的key来匹配对应的图片资源：

// 1. 在组件外部或单独的文件中定义图片映射
const NovelCoverMap = {
  "novel_01": require("../../assets/covers/novel_01.png"),
  "novel_02": require("../../assets/covers/novel_02.png"),
  // 按需求添加所有小说封面
};

// 2. NovelItem组件中使用
const NovelItem = ({ coverKey }) => {
  return (
    <View>
      <Image 
        source={NovelCoverMap[coverKey]} 
        style={{ width: 80, height: 120, borderRadius: 4 }} 
      />
      {/* 其他组件内容 */}
    </View>
  );
};

// 3. 父组件FlatList中传递参数
<FlatList
  data={novelList}
  renderItem={({ item }) => <NovelItem coverKey={item.coverKey} />}
  keyExtractor={(item) => item.id}
/>

方案2：将图片放入原生资源目录 #

把图片放到安卓和iOS的原生资源目录，通过资源名加载：

• 安卓：将图片放入android/app/src/main/res/drawable目录（注意文件名不能有大写或特殊字符）
• iOS：将图片添加到Xcode的Images.xcassets资源目录中

然后在组件中直接通过资源名加载：

const NovelItem = ({ coverName }) => {
  return (
    <Image 
      source={{ uri: coverName }} 
      style={{ width: 80, height: 120 }} 
    />
  );
};

注意：这种方式必须显式指定Image的宽高，否则图片不会显示。

方案3：使用Expo Asset（仅Expo项目） #

如果是Expo开发环境，可以用expo-asset预加载资源：

import { Asset } from 'expo-asset';
import { useState, useEffect } from 'react';
import { Image } from 'react-native';

const NovelItem = ({ coverPath }) => {
  const [asset, setAsset] = useState(null);

  useEffect(() => {
    const loadAsset = async () => {
      const loadedAsset = Asset.fromModule(require(coverPath));
      await loadedAsset.downloadAsync();
      setAsset(loadedAsset);
    };
    loadAsset();
  }, [coverPath]);

  return asset ? (
    <Image source={asset} style={{ width: 80, height: 120 }} />
  ) : null;
};

这里的coverPath仍然需要是静态可解析的路径，比如传递"../../assets/covers/novel_01.png"这种字面量字符串，不能是动态拼接的变量。

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