Use Image with a local file

Question

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

User · Answer

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 (...);
}

User · Answer

Using React Native 0 41  in March 2017   targeting iOS  I just found it as easy as    lt Image source  require    myimage png      gt    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

User · Answer

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       lt Image source   uri Logo file     gt

User · Answer

ES6 solution  import DefaultImage from     assets image png    const DEFAULT IMAGE   Image resolveAssetSource DefaultImage  uri   and then   lt Image source   uri  DEFAULT IMAGE     gt

User · Answer

To display image from local folder  you need to write down code     lt Image source  require     assets self png     gt    Here I have put my image in asset folder

User · Answer

It works exactly as you expect it to work  There s a bug https   github com facebook react-native issues 282 that prevents it from working correctly    If you have node modules  with react native  in the same folder as the xcode project  you can edit  node modules react-native packager packager js and make this change  https   github com facebook react-native pull 286 files   It ll work magically      If your react native is installed somewhere  else and the patch doesn t work  comment on https   github com facebook react-native issues 282 to let them know about your setup

User · Answer

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

User · Answer

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        lt View style  styles horizontal  gt         lt Image source  require  image uie thumb normal    style  styles icon    gt         lt Image source  require  image uie thumb selected    style  styles icon    gt         lt Image source  require  image uie comment normal    style  styles icon    gt         lt Image source  require  image uie comment highlighted    style  styles icon    gt       lt  View gt

User · Answer

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    lt Image style  styles image  source   uri   http   www mysyte com myimage jpg      gt    remember then to set the width and height via the style property   var styles   StyleSheet create      image       width  360      height  40

User · Answer

We can do like below  const item        image  require  quot       assets dashboard project1 jpeg quot        location   quot Chennai quot       status  1      projectId  1        lt Image source  item image  style     width  150  height  150      gt

User · Answer

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

[react-native] Use <Image> with a local file

Examples related to react-native