React-Native, error loading image from relative path

Question

I just started messing around with React-Native and I'm getting hung up on the Image Component.

I'm trying to load an image from a relative path. https://github.com/JoeTheDave/LuLaFlow/blob/master/client/Application/Components/LuLaFlow.js

<Image style={styles.logo} source={require('../Content/Images/LulaRoe.jpg')} />

But I'm getting a build error saying that the resulting image path is an invalid directory.

Can someone take a peek at my github project and point out what I'm doing wrong?

Thanks

Answer 1

You have the path correct but have a small typo in the image name. The packager server is case sensitive so LulaRoe.jpg needs to be LuLaRoe.jpg.

A useful technique for debugging asset issues quickly is to try to get your asset from your browser using http://localhost:8081assets/[FullAssetPath]

In your case, with the packager running, navigate to this link and you'll see an error so you know something is wrong with your path:

Bad: http://localhost:8081/assets/Application/Content/Images/LulaRoe.jpg

Navigate to this one and you should now see your image in your browser:

Good: http://localhost:8081/assets/Application/Content/Images/LuLaRoe.jpg