React Native项目中图片无法访问的问题求助

• 检查路径与大小写
  确认路径层级匹配，比如图片在assets/images/logo.png，当前组件在src/screens/Home.js，相对路径应为../../assets/images/logo.png。另外iOS严格区分文件名大小写，比如Logo.png和logo.png会被视为不同文件，建议统一用小写字母加下划线命名。

• 规范图片命名与格式
  图片文件名不要包含空格、中文或特殊字符（如#、@），推荐格式：user_avatar.png、bg_splash.jpg。同时确认图片格式为React Native支持的类型：PNG、JPG、JPEG、WebP（Android原生支持，iOS需额外配置）。

• Metro配置检查
  在项目根目录的metro.config.js中，确保assetExts包含你的图片格式。示例配置：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  const config = {};
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    resolver: {
      assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'png', 'jpg'],
    },
  });
  

• 正确使用Image组件
  本地图片必须用require()导入，不能用ES6的import语法（除非配置了别名或特殊处理）：

  // 正确写法
  <Image source={require('../../assets/images/logo.png')} />
  
  // 错误写法（本地图片不支持）
  import logo from '../../assets/images/logo.png';
  <Image source={logo} />
  

  远程图片才使用{ uri: '图片地址' }的格式。

• 清除缓存并重启服务
  执行以下命令清除缓存，再重启Metro服务器：

  npx react-native start --reset-cache
  

  同时重启模拟器/真机，确保缓存被彻底清除。

• 确认图片目录结构
  确保图片放在项目可访问的目录下，不要放在node_modules或.gitignore排除的目录中。默认Metro会扫描项目根目录下的所有文件，自定义目录无需额外配置即可被识别。

内容的提问来源于stack exchange，提问作者Big news Clips