CODEWITHSUNDEEP
react-nativereact-native-image
Sternjobname
Sternjobname

Reputation: 779

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?

Upvotes: 2

Views: 3202

Answers (1)

Jickson
Jickson

Reputation: 5193

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'}

Upvotes: 5

Related Questions