Why can't string variable be used in <Image source={}/>? (React Native)

问题

I am trying to do the following:

var itemImage = '../img/image1.jpg'

return(
        <Image
          source={require(itemImage)}
        />

but it keeps saying the error:

Requiring unknown module '../img/image1.jpg'. 

But when I directly put in: '../img/image1.jpg' inside require() then it works.

What may be the issue? Any guidance or insight would be appreciated.

EDIT ***

I have the following in my constructor as my dataSource:

this.state = {dataSource: ds.cloneWithRows([{name: '../img/item1.jpg'}, {name: '../img/item2.jpg'}])}

then in my renderRow(), I am trying to achieve something like the following so it updates based on the dataSource:

renderRow(rowData){
    var itemImage = require(rowData.name)

    return(
            <Image
              source={itemImage}
            />

But I am still getting the same error:

Requiring unknown module '../img/image1.jpg'. 

回答1:

Using require with any resource file is a special case. It is not common javascript require. Packager must know what image will be required while building application (before any code executed) to replace it with resource ID. So parameter can't be variable and must be constant.

But you can simply do:

{
   dataSource: ds.cloneWithRows([
       {image: require('../img/item1.jpg')},
       {image: require('../img/item2.jpg')}
   ])
}

回答2:

Try this with single curly brace in image source. and storing image path in image variable with require() method.

render(){
    var image=require('../img/image1.jpg');
    return(
       <View >
           <Image source={image}/>
       </View>
      );
 }

来源：https://stackoverflow.com/questions/38366191/why-cant-string-variable-be-used-in-image-source-react-native