The local image is not displayed in the reactnative-CodePudding

I'm new to reactnative. Whatever I do, I do not know why it does not show local images. I changed the photo, I changed the location of the file, etc., but it did not work.

import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Image  source={require('./assets/icon.png')} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

CodePudding user response：

I don't think the problem is the location of your image. You should specify the size of the image. style={{ width: 40, height: 40 }}

 <View style={styles.container}>
  <Text>Open up App.js to start working on your app!</Text>
  <Image style={{ width: 40, height: 40 }} source={require('./assets/icon.png')} />
  <StatusBar style="auto" />
</View>