如何使用数据库中存储的文件路径作为Image组件的图片源加载展示

首先你遇到的两个问题本质都是React Native静态资源打包机制的限制：

• require 是打包阶段静态执行的语法，不支持运行时动态拼接路径作为参数
• require 返回的数字ID是打包/资源加载时临时分配的，不具备持久化存储的意义，每次冷启动ID可能发生变化，所以会出现冷启动报错、后续运行正常的情况

针对不同的使用场景，有两种成熟可行的方案：

场景1：使用项目内置的静态assets资源 #

如果要加载的是打包前就放在项目assets目录里的固定资源，操作步骤如下：

1. 建立静态资源映射表，比如新建src/utils/imageAssets.js：

export const ImageAssets = {
  // 键为自定义的唯一资源标识，值为对应的require语句
  icon_default: require('../assets/icon.png'),
  icon_avatar: require('../assets/avatar.png'),
  // 所有需要用到的静态资源都在此处提前声明
}

2. 数据库的Path字段只存资源对应的键名（比如icon_default），不要存路径或者require返回的数字ID
3. 组件中加载时直接从映射表取值：

<Image source={ImageAssets[item.Path]} />

场景2：存储用户运行时产生的图片（拍照、相册选择等） #

如果是用户使用应用过程中生成的本地图片，不要放在assets目录，要存储到应用沙盒的可读写目录下（比如iOS的Documents目录、Android的应用内部存储目录），操作步骤如下：

1. 获取图片的完整绝对路径（不能用相对路径），将绝对路径字符串存入数据库的Path字段
2. 组件中加载时用uri方式调用：

<Image source={{ uri: item.Path }} />

注意：需要提前申请应用对应存储目录的读写权限，避免权限不足导致图片加载失败

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