React Native从数据库获取图片路径后无法加载图片如何解决？

• 你存入数据库的路径是Windows开发设备的本地磁盘路径，而React Native应用运行在移动端模拟器/真机的独立运行环境中，无法直接跨设备访问开发机的本地文件系统资源。
• React Native的Image组件无法识别C:\格式的Windows本地路径，不符合图片加载的uri规则。

1. 推荐方案：将图片托管到资源服务 #

将所有商品图片上传到后端静态资源服务、云存储服务中，数据库image字段存储图片对应的HTTP/HTTPS可访问链接，比如https://your-domain.com/images/Rectangle_2.png，直接传入Image组件的uri属性即可正常加载。

2. 固定静态资源方案：存入RN项目资源目录 #

如果商品图片是固定的静态资源，可将所有图片放到RN项目的assets/images目录下，数据库存储图片的文件名，通过提前声明的资源映射表加载：

// 提前声明资源映射
const goodsImageMap = {
  'Rectangle_2.png': require('../assets/images/Rectangle_2.png'),
  // 其他图片映射可按格式补充
}

// Cart组件中使用
<Image
  style={{
    width: '40%',
    height: 100,
  }}
  source={goodsImageMap[props.image]}
/>

注意：React Native的require方法不支持动态拼接变量路径，必须提前把所有资源的引入声明好。

3. 开发阶段临时测试方案 #

如果仅在开发阶段测试使用，可将图片放到后端服务的静态资源目录，启动后端服务后用开发机的局域网IP拼接图片路径存入数据库，比如http://192.168.1.10:3000/static/Rectangle_2.png，确保移动端设备和开发机连接同一局域网即可访问。

另外你的代码中存在一个笔误：FlatList的键提取属性名是keyExtractor，你写的keyEtractor会触发警告，建议同步修正。

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