React-native: image require variable problem

[ibeeger]

mycode

renderItem(item,i,_this){
    var text = _this.state.names[i]
    var pic = require(item) || require("../../assets/list.png");
        console.log(pic+"k"+item)
      return(
          < TouchableHighlight style={styles.touch} key={i} onPress={this.props.changePage} underlayColor="#c00">
            < View style={styles.cell}>
            < Image
             style={styles.icon}
             source={pic}
           / >
           < Text style={styles.text}>{text}
            
            
        )
  }

var rows = []
        icons.forEach(function (item,i) {
          rows.push(_this.renderItem(item,i,_this));
        })

errcode

function requireImpl(id) {
  if (global.ErrorUtils && !inGuard) {
    inGuard = true;
    var returnValue;
    try {
      returnValue = requireImpl.apply(this, arguments);
    } catch (e) {
      global.ErrorUtils.reportFatalError(e);
    }
    inGuard = false;
    return returnValue;
  }

  var mod = modules[id];
  if (!mod) {
    var msg = 'Requiring unknown module "' + id + '"';
    if (__DEV__) {
      msg += '. If you are sure the module is there, try restarting the packager or running "npm install".';
    }
    throw new Error(msg);
  }

[satya164]

var pic = require(item) || require("../../assets/list.png");

You cannot use variables in require. All requires must be statically analyzable. That means you always have to write require('/path/to/file').

[ibeeger]

@satya164 my assets images in array ,I want to use the array elements require

[satya164]

@ibeeger have the requires in an array instead. e.g. instead of [ 'img1', 'img2' ], you can have [ require('img1'), require ('img2') ]

[ibeeger]

@satya164 thank you

[pppluto]

any other solution if i want require regular image based on some variable ? it costs much time if we have too many image.

[satya164]

@MrPluto Packager needs to be able to statically analyze the images to be able to bundle them into the app automatically. As an alternative, you can bundle the images in your app manually and the use <Image source={{ uri: 'file:///path/to/image' }} /> where variables will work.

[pppluto]

@satya164 thanks a lot :+1:

[gilnuy]

hi,all
i have the same problem,how to get the app bundle path with js code?

[dushaobindoudou]

maybe help requireAll

[amorenew]

I found this answer useful

const images = {
    profile: {
        profile: require('./profile/profile.png'),
        comments: require('./profile/comments.png'),
    },
    image1: require('./image1.jpg'),
    image2: require('./image2.jpg'),
};

export default images;

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

[ghost]

Hi , please who can help me ? I have the same problem , the solutio of @satya164 is useful but in my case I want to register an image in data base , so I must use an variable inside require . Someone have an idea ?

[amorenew]

@kilaniba search about base64 images may could solve your problem

[ghost]

@amorenew You can't more explication ?

[amorenew]

@kilaniba
in HTML>>
https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html
sample >>
http://jsfiddle.net/hpP45/

in React Native >>
https://stackoverflow.com/questions/29380265/does-react-native-support-base64-encoded-images

image to base64 >>
https://www.base64-image.de/

[ghost]

@amorenew Thank you very much .barak allah fik.