set image in returned map() object

Question

I cannot load an image after calling map function:

this.rosImgs.push({img: '../imgs/ros_eat.png', id: this.imgId});

getRosette(){
    return this.rosImgs.map((obj) =>
      <TouchableHighlight key={obj.id} onPress={() => this.imgClick()}>
        <Image
          source={require(obj.img)}
        />
      </TouchableHighlight>
    );
  }

The following error occures:

Unknown named module:'../imgs/ros_eat.png'

but when i do source={require('../imgs/ros_eat.png')} it works.

Please help

Answer 1

In react native the images cannot be loaded dynamically and are parsed before. So I suggest changing the code like below.

this.rosImgs.push({img: require('../imgs/ros_eat.png'), id: this.imgId});

getRosette(){
    return this.rosImgs.map((obj) =>
      <TouchableHighlight key={obj.id} onPress={() => this.imgClick()}>
        <Image
          source={obj.img}
        />
      </TouchableHighlight>
    );
  }