Responsive to loading the original relative image path

Question

I am trying to use some images in my reaction based project.

My project has the following structure:

./index.android.js ./images/icon.png 

I am trying to load an image inside a view in index.android.js:

 <View> <Image source={require('./images/icon.png')} style={styles.icon} /> </View> 

I know that images are found because I am not getting any errors (if I try to claim a nonexistent image that I am making). But, nevertheless, the images do not load, and this is an empty box in which the image should be.

What am I doing wrong? I am using native-native 0.15.0 using a mobile device for testing.

Update:

So, I found this in my build.gradle file for my application:

  * // where to put drawable resources / React Native assets, eg the ones you use via * // require('./image.png')), in debug mode * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 

My images are not in this folder. I suppose a problem?

Answer 1

Do you use windows I ran into the same problem, and it turned out that packager/react-packager/src/Bundler/index.js error with the way the resource URL path was created. It uses the path module to convert the local file path to a URL, but the path module returns paths with its own path separators. On Windows, you get invalid URL paths due to paths that have a backslash rather than slashes. A quick fix is ​​to replace the backslash with a slash.

See the diff file in my draft request for more details.

https://github.com/facebook/react-native/pull/4416/files

Update: My transfer request was accepted and released with version 0.17.