升级至Expo SDK 51后本地存储图片无法正常显示问题

以下是针对该问题的排查与解决步骤：

• 重新安装并清理缓存
  当前使用的expo-image@~1.12.9与SDK51兼容，但升级后可能存在缓存异常，执行以下操作：

  npm uninstall expo-image
  npm install expo-image@~1.12.9
  npx expo start --clear
  

• 验证资源配置
  检查app.json/app.config.js中的assets字段，确保包含图片目录：

  {
    "expo": {
      "assets": ["./assets/images/"]
    }
  }
  

  若配置无误，重新生成资源映射：

  npx expo prebuild --clean
  

• 检查路径与引用

  • 确认相对路径拼写（大小写、文件名后缀）完全正确，比如从homescreen.tsx到目标图片的层级是否匹配../assets/images/ArtHomePage1.png
  • 尝试改用绝对路径或别名引用（若项目配置了路径别名）：

    // 绝对路径示例（根据实际层级调整）
    source={require("../../assets/images/ArtHomePage1.png")}
    // 别名示例（需提前配置tsconfig.json/jsconfig.json）
    source={require("@/assets/images/ArtHomePage1.png")}
    

• 排查组件属性与样式

  • 临时替换contentFit为resizeMode测试兼容性：

    <Image
      resizeMode="contain"
      style={styles.headerImage}
      source={require("../assets/images/ArtHomePage1.png")}
    />
    

  • 确保样式中设置了明确的宽高值，避免因尺寸为0导致图片不可见：

    const styles = StyleSheet.create({
      headerImage: {
        width: 200,
        height: 200,
      },
    });
    

• 清理依赖冲突
  检查是否存在expo-asset等可能冲突的依赖，若有则移除：

  npm uninstall expo-asset
  

  运行npm list查看依赖树，清理冗余或版本不兼容的包。

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