React Native - 无法从路径导入图像

Question

I have the following basic react native code:

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

//images
import login_blueGirl from './assets/images/login_blueGirl.png';


const App = () => {
  return (
    <>
     <View style={styles.container}>
        <Image source={login_blueGirl}></Image>
     </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  }
});

export default App;

I'm getting a Cannot find module './assets/images/login_blueGirl.png' . When I type ./ VSCode give me however the autocomplete option:

Any clue on why this is happening?

Answer 1

That's not quite how you're supposed to be importing images, use require instead.

const App = () => {
    return (
        <View style={styles.container}>
            <Image source={require("./assets/images/login_blueGirl.png")} />
        </View>
    );
};

Answer 2

To import a static file like a .png file, you can declare

const blueGirl = require("assets/images/login_blueGirl.png");

Then you can use it in an Image component

<Image style={styles.image} source={blueGirl} />

Also the image is used as a self closing tag you don't have to add another </Image> tag.

In order to fully understand how tags and syntax work always check out the official documentation React Native API

Answer 3

You can specify the width and height of the image to display it, do this:

const App = () => {
  return (
    <View style={styles.container}>
      <Image style={{ width: 100, height: 80 }} source={require("./assets/images/login_blueGirl.png")}></Image>
    </View>
  );
};

or

const styles = StyleSheet.create({
    imgStyle: {
        width: 50,
        height: 50,
    }
});

const App = () => {
    return (
        <View style={styles.container}>
            <Image style={styles.imgStyle} source={require("./assets/images/login_blueGirl.png")}></Image>
        </View>
    );
};