Search code examples
react-native

Use <Image> with a local file

The documentation says that the only way to reference a static image is to use require.

But I'm not sure where does react expect to have those images. The examples don't have any domain, so it seems like you have to go to Xcode and add them to Images.xcassets, but that didn't work for me.

Solution

  • Using React Native 0.41 (in March 2017), targeting iOS, I just found it as easy as:

    <Image source={require('./myimage.png')} />

    The image file must exist in the same folder as the .js file requiring it for "./" to work.

    I didn't have to change anything in the XCode project. It just worked.

    Note that the path seems to have to start with "./" or "../" and be full lower case. I'm not sure what all the restrictions are, but start simple and work forward.

    Hope this helps someone, as many other answers here seem overly complex and full of (naughty) off-site links.

    UPDATE: BTW - The official documentation for this is here: https://reactnative.dev/docs/images