如何在Reactjs中动态渲染图像？

Question

我正在尝试使用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'
    }
  }

这是渲染

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>}
    );
  }

我该怎么办 ？

Answer 1

由于<img>的src属性采用网址，因此我将falsyData更改为

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'
  }
}

这样，您require('path/file.jpg') URL传递给<img>元素，而不是返回任何require('path/file.jpg')返回。