Why set dollar is not working?

Question

If i just set require('../img/dest.png') the image is working, but when i try to use like

It will show error

calls to require expect exactly 1 string literal argument but this was found: require(""+item.img+"").(null)

Any one knows what happens in my dollar variable ?

Thanks in advance.

render() {
  // Taken from https://flatuicolors.com/
  const items = [
    { name: 'Name', code: '#1abc9c', url: 'yahoo.com.tw', img: '../img/dest.png' }
  ];

  return (
    <GridView
      itemDimension={130}
      items={items}
      style={styles.gridView}
      renderItem={item => {
        console.log(`'${item.img}'`);
        return (
        <TouchableOpacity onPress={() => this.showLinkAlert(item.name, item.url)}>
          <ImageBackground source={require(`'${item.img}'`)} style={[styles.itemContainer, { backgroundColor: '#bdc3c7' }]}>
           <Text style={styles.itemName}>{item.name}</Text>
          </ImageBackground>
        </TouchableOpacity>
        );
      }}
    />
  );
  }
}

with image source, if you want use `require`, the parameter must be a raw string. You can `uri` instead. — tuan.tran, Jul 26 '18 at 07:19
Check this link because already given answer on- https://stackoverflow.com/questions/44468500/image-react-native-not-working — Pratius Dubey, Jul 26 '18 at 07:21

score 3 · Accepted Answer · answered Jul 26 '18 at 07:20

3

The string substitution happens at run time, but require happens at build time. So when require runs it doesn't substitute anything, it just tries to find a file called that.

answered Jul 26 '18 at 07:20

Johanna Larsson

10,531
6
39
50

Why set dollar is not working?

1 Answers1