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

由于src的{{1}}属性需要一个网址，我会将您的<img>更改为

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' } }元素而不是<img>次返回。

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

1 个答案: