Accessing static/local images in React Native

问题

In my React Native project folder I have the src files which hold the components, and also some images I want to use across both iOS and Android. If I use this:

<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />

then the image loads perfectly. However, the source in the image tag is going to be created dynamically when the user takes a photo. This code:

<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />

does not work. No errors thrown, but no image displayed. I'm sure I'm on the right track as it will return images taken by the camera and stored on the device using the same code when I replace the source with a prop (<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />) but for the static image it's not happening. Suggestions?

回答1:

For the static images you need to specify like below source

source={require('static_image_path_relative_current_directory')

Only for remote and local files(not static) we need to specify uri in source like below

source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}

来源：https://stackoverflow.com/questions/40351857/accessing-static-local-images-in-react-native