React Native如何展示SQL数据库中店铺图片的本地路径？

核心原因 #

React Native 的 require() 是静态解析机制，打包工具会在编译阶段就把 assets 目录下的图片处理成资源 ID，动态传入的字符串路径（比如从数据库获取的 pharmaimages）无法被正确识别，所以直接 require(pharmaimages) 会报错。而 uri 属性失效是因为本地 assets 路径不能通过 uri 直接访问，或者路径格式不符合要求。

可行解决方案 #

方案1：静态映射本地图片 #

提前把所有需要用到的本地图片做成键值对映射，数据库只存储图片的标识（比如文件名），而非完整路径：

// 定义本地图片映射表
const localImageMap = {
  picture1: require('../../../assets/picture1.jpg'),
  picture2: require('../../../assets/picture2.jpg'),
  // 按需求添加所有店铺对应的图片
};

// 在组件中调用
<Image 
  style={{resizeMode: 'cover'}} 
  source={localImageMap[pharmaimages]} // pharmaimages 是数据库返回的文件名，比如"picture1"
/>

注意：数据库中存储的内容要和映射表的键完全一致，不要带引号或完整路径。

方案2：将图片托管到服务器，使用网络URI #

把店铺图片上传到云存储或自建服务器，数据库存储图片的完整网络地址（比如 https://your-server.com/store-images/picture1.jpg），然后直接用 uri 加载：

<Image 
  style={{resizeMode: 'cover'}} 
  source={{uri: pharmaimages}} 
/>

额外注意：

• 确保网络 URI 是可公开访问的
• iOS 若使用 http 协议，需要在 Info.plist 中配置 ATS 例外
• 给 Image 组件设置固定宽高，避免因尺寸问题导致图片不显示

排查小细节 #

• 检查数据库中存储的路径是否有拼写错误（比如你示例里的 jepg 应为 jpg）
• 数据库里的路径不要包含引号，比如存储 ../../../assets/picture1.jpg 而非 "../../../assets/picture1.jpg"

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