React Native中设置图片URL到状态后无法在Image组件使用的问题

问题原因 #

React Native 的 require() 方法要求传入静态字符串路径，不能用状态变量作为参数。因为 Metro 打包工具在编译阶段就会扫描所有 require 引用的图片资源并打包，运行时的动态变量无法被提前识别，所以你用 require(splashImage) 的写法会失效。

解决方案 #

1. 预加载固定图片资源（适合切换有限数量的本地图片）

提前把所有可能用到的图片通过 require 加载，再将加载后的资源对象存入状态：

// 组件外部或初始化时预加载图片
const splashImageAsset = require('../../assets/images/image.png');
const otherImageAsset = require('../../assets/images/other.png');

// 组件内部状态管理
const [splashImage, setSplashImage] = useState(splashImageAsset);

// 直接在Image组件中使用状态
<Image
  source={splashImage}
  style={{ height: 100, width: 100 }}
/>

2. 使用 URI 格式加载（适合动态路径或远程图片）

如果图片路径是动态生成的，或者需要从接口获取，可以将图片转为 URI 格式存入状态：

// 方式1：将本地图片转为URI后存入状态
const initialImageUri = require('../../assets/images/image.png').uri;
const [splashImage, setSplashImage] = useState(initialImageUri);

// 使用时传入uri对象
<Image
  source={{ uri: splashImage }}
  style={{ height: 100, width: 100 }}
/>

// 方式2：远程图片直接存URI字符串
setSplashImage('https://your-domain.com/image.png');

3. 动态文件名匹配（适合批量同目录图片）

如果需要根据文件名动态加载同目录下的图片，可以用静态路径模板（路径前缀必须固定，仅后缀可动态）：

// 封装动态加载函数
const loadImage = (imageName) => {
  // 路径前缀必须是静态字符串，不能用变量
  return require(`../../assets/images/${imageName}.png`);
};

// 存入状态
setSplashImage(loadImage('image'));

// 使用Image组件
<Image
  source={splashImage}
  style={{ height: 100, width: 100 }}
/>

关键注意点 #

• 永远不要把动态变量直接传给 require()，必须保证路径在编译时可确定
• 状态可以存储两种类型的值：require() 返回的资源对象，或者图片的 URI 字符串
• 本地图片用 URI 格式时，需确保图片已被正确打包（安卓放在 drawable，iOS 放在 Images.xcassets 或通过 require 转换）

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