How to dynamically render an image in Reactjs?

Question

I am trying to display an image with React

const falsyData = {
    'Agent Swartz': {
      'username' : 'Kakaroto',
      'position': 'Agent',
      'picture': require('./img/aaron.jpg'),
      'area': 'Canada'
    },
    'Agent Larry': {
      'username' : 'Larry',
      'position': 'User',
      'picture': require('./img/larry.jpg'),
      'area': 'France'
    }
  }

here is the render

constructor() {
    super();
    this.state = {value : '', result: ''};
  } 
render () {
    let searchRes = this._matchPeople(this.state.value),
        match = Object.keys(searchRes).map(function(key) {
          return <div><h3>{key}</h3>
                Username: <strong>{searchRes[key].username}</strong> <hr />
                Position: <strong>{searchRes[key].position}</strong> <hr />
                Picture: <strong>{searchRes[key].username}</strong>  <hr />
                Area: <strong>{searchRes[key].area}</strong>         <hr />
                <img src={searchRes[key].picture} />  // HERE I NEED THE IMG
          </div>;
        });
    return (
            <TextField onChange={this._onChange.bind(this)}
                    onKeyUp={this._changeInput.bind(this)}
                    value={this.state.value} />
            {!!this.state.value.length && <div>{match}</div>}
    );
  }

what should I do ?

Unless you have a custom module loader, require will not "load" image files. require only understands JSON and JS by default. — Felix Kling
– Felix Kling, Commented Sep 4, 2015 at 2:45

franky · Accepted Answer · 2015-09-04 02:42:30Z

1

Since the src attribute of <img> takes a url, I would change your falsyData to

const falsyData = {
  'Agent Swartz': {
    'username' : 'Kakaroto',
    'position': 'Agent',
    'picture': '/img/aaron.jpg',
    'area': 'Canada'
  },
  'Agent Larry': {
    'username' : 'Larry',
    'position': 'User',
    'picture': './img/larry.jpg',
    'area': 'France'
  }
}

This way you're passing a url to the <img> element instead of whatever require('path/file.jpg') returns.

answered Sep 4, 2015 at 2:42

franky

1,3331 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically render an image in Reactjs?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related