React Native Expo本地图片无法显示问题求助

问题详情 #

在React Native Expo项目中尝试显示本地图片，无报错但图片不显示。修改路径会触发文件找不到错误，说明当前路径正确。已尝试：

• 使用React Native的Image组件和Expo的expo-image组件
• 更换多张不同图片
  测试环境：通过Expo Go扫码在iPhone上运行

依赖包信息 #

"expo": "^51.0.9",
"react": "18.2.0",
"react-native": "0.74.1",
"@expo/metro-runtime": "~3.2.1",
"@expo/vector-icons": "^14.0.0",
"expo-constants": "~16.0.2",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.15",
"expo-secure-store": "~13.0.1",
"expo-status-bar": "~1.12.1",
"react-dom": "18.2.0",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10",
"expo-image": "~1.12.9",
"expo-asset": "~10.0.6"

代码示例 #

import {View, Text, StyleSheet, Image} from 'react-native';
import React from 'react';

export default function Full() {
    return (
        <View style={styles.container}>
            <Text>Title</Text>
            <Image
                source={require('../../assets/icon.png')}
                width={50}
                height={50}
                style={styles.image}
            />
            <Text>Subtitle</Text>
        </View>
    );
};

export const styles = StyleSheet.create({
    container: {
        backgroundColor: 'rgb(30, 41, 59)',
        alignItems: 'center',
        justifyContent: 'center',
        width: 200,
        height: 200
    },
    image: {
        width: 50,
        height: 50
    },
});

尝试建议后的截图 #

实用解决方案 #

1. 检查资源配置 #

确认app.json（或app.config.js）中已配置assets字段，将图片所在目录纳入打包范围：

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

配置完成后重启Expo服务，让Metro重新扫描资源。

2. 移除重复的宽高属性 #

代码中同时给Image组件设置了width/height属性和StyleSheet中的宽高，可能导致渲染冲突，建议只保留StyleSheet配置：

<Image
    source={require('../../assets/icon.png')}
    style={styles.image}
/>

3. 规范expo-image组件用法 #

如果改用expo-image，需导入正确并添加contentFit属性确保图片正常显示：

import { Image } from 'expo-image';

// 组件内使用
<Image
    source={require('../../assets/icon.png')}
    style={styles.image}
    contentFit="cover"
/>

4. 清除Expo缓存 #

执行命令清除缓存后重启项目：

npx expo start -c

5. 验证图片兼容性 #

确保图片格式为Expo支持的类型（PNG、JPG、SVG等），避免使用过大尺寸的图片，可尝试压缩后再测试。

6. 使用asset模块加载图片 #

若相对路径存在歧义，可通过expo-asset模块明确加载：

import { Asset } from 'expo-asset';

const imageAsset = Asset.fromModule(require('../../assets/icon.png'));

// 组件内使用
<Image
    source={{ uri: imageAsset.uri }}
    style={styles.image}
/>

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