Expo Image组件无法显示图片问题排查求助

问题原因 #

expo-image的source属性与react-native原生Image的用法不同，不支持直接传入相对路径字符串，需要使用require导入资源或者静态import的方式。

修复方案 #

方案1：使用require导入

修改Image组件的source属性为require语法：

<Image
    style={styles.image}
    contentFit="contain"
    transition={1000}
    source={require('../../assets/mockImages/image1.png')}
/>

方案2：静态导入图片

先在文件顶部导入图片资源，再传入source：

import { Image } from "expo-image";
import { useRef, useState } from "react";
import {
    Dimensions,
    StyleSheet,
    Text,
    useWindowDimensions,
    View,
} from "react-native";
// 静态导入图片
import image1 from '../../assets/mockImages/image1.png';

export function Page() {
    return (
        <View>
            <Image
                style={styles.image}
                contentFit="contain"
                transition={1000}
                source={image1}
            />
        </View>
    );
}

额外样式优化 #

你的image样式中同时设置了width:100、height:100和flex:1，可能导致布局冲突，建议根据需求调整：

const styles = StyleSheet.create({
    image: {
        width: 100,
        height: 100,
        // 若不需要自适应父容器，移除flex:1
        // flex: 1,
    },
});

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