2

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?

Sternjobname
  • 740
  • 1
  • 10
  • 23

1 Answers1

5

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'}
Jickson
  • 5,133
  • 2
  • 27
  • 38
  • 1
    Nice - thanks! I thought there may be a way of using the URI for static; if not then I'll just make a couple of different modules to handle it instead. – Sternjobname Nov 01 '16 at 09:38