如何在React Native与Expo中显示图片？新手项目加载报错求助

嘿，我来帮你搞定这个图片加载的麻烦！我自己在Expo项目里也遇到过类似的情况，下面是几个实用的排查和解决步骤，你可以逐一尝试：

1. 严格检查路径与文件名的大小写 #

React Native的require()对文件路径和文件名的大小写非常敏感，尤其是在iOS设备/模拟器上。你要确保：

• img文件夹的大小写和你代码里写的完全一致（比如不能实际是Img但代码里写img）
• 图片文件名record_video.png的大小写、连字符都要和实际文件完全匹配，不能出现Record_Video.png或者recordvideo.png这种差异

2. 确认文件的相对位置是否正确 #

你需要保证img文件夹和你当前编写<Image>组件的文件处于正确的层级关系：

• 如果你的组件文件在src/screens/VideoScreen.js，那么img文件夹应该在src/screens/img/，这时./img/record_video.png才是正确路径
• 如果img文件夹在项目根目录（和App.js同层级），那你需要把路径改成../img/record_video.png（根据组件所在层级调整../的数量）

3. 清除Expo缓存并重启项目 #

有时候Expo的缓存会导致新添加的资源无法被识别，你可以这样操作：

• 关闭当前运行的Expo开发服务器
• 在终端运行命令：npx expo start -c（-c参数用于强制清除缓存）
• 重新在Expo Go里加载项目，或者摇一摇设备选择「Reload」刷新

4. 尝试验证图片文件本身 #

确保你的record_video.png是一个有效的、未损坏的PNG文件：

• 直接双击打开图片，确认能正常显示
• 可以替换一张已知能用的PNG图片到相同路径，测试是否能加载成功，排除文件损坏的可能

5. 可选：使用Expo Asset API预加载资源（针对复杂场景） #

如果上面的方法都不行，你可以试试用Expo的Asset系统来处理本地图片：

import { useEffect, useState } from 'react';
import { Image } from 'react-native';
import { Asset } from 'expo-asset';

function RecordButton() {
  const [imageUri, setImageUri] = useState(null);

  useEffect(() => {
    async function loadImage() {
      const imageAsset = Asset.fromModule(require('./img/record_video.png'));
      await imageAsset.downloadAsync();
      setImageUri(imageAsset.localUri);
    }
    loadImage();
  }, []);

  return imageUri ? <Image source={{ uri: imageUri }} /> : null;
}

这个方法适合需要预加载或者处理特殊资源的场景，不过本地图片优先推荐用相对路径的require()方式。

如果尝试完这些步骤还是有问题，可以告诉我你的组件文件所在的具体位置和img文件夹的项目结构，这样能更精准地排查问题。

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