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 ?
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.