Expo无法加载本地assets文件夹内图片，缺失哪些配置项？

1. 配置静态资源托管路径 #

你看到的200状态是Expo开发服务返回的默认占位资源，并非你本地的实际图片，原因是Expo默认不会把项目根目录的assets文件夹作为静态资源目录对外暴露，需要手动修改app.json配置：

{
  "expo": {
    "web": {
      "staticPath": "./assets"
    },
    "assets": ["./assets"]
  }
}

配置修改后需要重启Expo开发服务生效。

2. 调整图片uri写法 #

配置完成后assets已经被设为静态资源根目录，uri不需要再加/assets前缀：

render(){
    // 原路径为/assets/book/cover.png，修改后直接取资源相对路径即可
    return <Image source={{uri: '/book/cover.png'}}></Image>
}

如果数据库中存储的路径已经固定带/assets前缀，可以在代码中做截取处理：
const finalUri = dbImgPath.replace('/assets', '')

3. 原生端兼容（安卓/iOS） #

如果应用需要运行在原生端，无法直接用相对uri加载包内assets资源，需要借助expo-asset模块解析路径：
首先安装依赖：
npx expo install expo-asset
代码中调用解析方法获取实际可访问的uri：

import { Asset } from 'expo-asset';

const getAssetUri = async (dbPath) => {
  const targetAsset = Asset.fromURI(dbPath);
  await targetAsset.downloadAsync();
  return targetAsset.uri;
}

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