如何在Reactjs中動態渲染圖像？

Question

我試圖顯示與圖像作出反應

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

這樣你傳遞一個URL到<img>元素，而不是任何require('path/file.jpg')回報。