Putting mapped variable in source for an Image

Question

I have searched through stack and no one has seem to ask this question based on what I want to achieve. I am mapping through an array and I want to do the name of the mapped variable as the source of the image, i.e I'll concatenate it with .jpg

This is what I attempted below, but it brings this error calls torequireexpect exactly 1 string literal argument, but this was found:require('./' + herb.name + '.jpg'). , what may I be doing wrong

 const herbs = this.state.record.map((herb) =>
 <View key={herb.id} style={BackStyles.herb_box}>
 <Image style={BackStyles.image} source={require('./'+herb.name+'.jpg')}/>
 <View style={{flexDirection: 'column',}}><Text style={BackStyles.header}>{herb.name}</Text> <Text style={BackStyles.sub}>{herb.bot}</Text></View>
            </View>
        );

Answer 1

That won't work as images need to be statically known up front, so the resolver to knows from where to load the assets.

In order for this to work, the image name in require has to be known statically.

More info here

var imageMap = {
    "herb1":  require('path.to.img.jpg'),
    "herb2":  require('path.to.img.jpg'),
};
<Image style={BackStyles.image} source={imageMap[herb.name]}/>

other option you can try is with the uri property
You can use the uri property to define a dynamic image within your resource folder in the project.

<Image source={{uri: `${herb.name}.jpg`}} />