[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.

We can do like below:

const item= {
    image: require("../../assets/dashboard/project1.jpeg"),
    location: "Chennai",
    status: 1,
    projectId: 1
}




<Image source={item.image} style={[{ width: 150, height: 150}]} />

From the UIExplorer sample app:

Static assets should be required by prefixing with image! and are located in the app bundle.

So like this:

render: function() {
  return (
    <View style={styles.horizontal}>
      <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
      <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
      <Image source={require('image!uie_comment_normal')} style={styles.icon} />
      <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
    </View>
  );
}

You have to add to the source property an object with a property called "uri" where you can specify the path of your image as you can see in the following example:

<Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />

remember then to set the width and height via the style property:

var styles = StyleSheet.create({
   image:{
    width: 360,
    height: 40,
  }
});

ES6 solution:

import DefaultImage from '../assets/image.png';

const DEFAULT_IMAGE = Image.resolveAssetSource(DefaultImage).uri;

and then:

<Image source={{uri: DEFAULT_IMAGE}} />

To display image from local folder, you need to write down code:

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

Here I have put my image in asset folder.

I was having trouble with react-native-navigation, I created my own header component, then inserted a image - as logo - on the left before title, then when I was triggering navigate to another screen and then back again, logo was loading again, with a timeout near 1s, my file were local. My solution :

Logo.json

{"file" : "base64 big string"}

App.js

import Logo from '.../Logo.json'
...
<Image source:{{uri:Logo.file}} />

This from https://github.com/facebook/react-native/issues/282 worked for me:

adekbadek commented on Nov 11, 2015 It should be mentioned that you don't have to put the images in Images.xcassets - you just put them in the project root and then just require('./myimage.png') as @anback wrote Look at this SO answer and the pull it references

I had this exact same issue until I realized I hadn't put the image in my Image.xcassets. I was able to drag and drop it into Xcode with Image.xcassets open and after rebuilding, it fixed the problem!

If loading images dynamically one can create a .js file like following and do require in it.

export const data = [
  {
    id: "1",
    text: "blablabla1",
    imageLink: require('../assets/first-image.png')
  },
  {
    id: "2",
    text: "blablabla2",
    imageLink: require('../assets/second-image.png')
  }
]

In your component .js file

import {data} from './js-u-created-above';
...

function UsageExample({item}) {
   <View>
     <Image style={...} source={item.imageLink} /> 
   </View>
}

function ComponentName() {
   const elements = data.map(item => <UsageExample key={item.id} item={item}/> );
   return (...);
}

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.

I didn't have to change anything in the XCode project. It just worked. Maybe things have changed a lot in 2 years!

Note that if the filename has anything other than lower-case letters, or the path is anything more than "./", then for me, it started failing. Not sure what 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://facebook.github.io/react-native/docs/images.html