jsx中的img src属性url

Question

I am trying to display images from an array, but when I am passing the src value as an expression {} it is just returning in the form of the object instead of a string.can anyone explain?

export default class Home extends Component{
    constructor(){
        super();
        this.state = {};
    }
    componentWillMount(){
        var url = "https://api.github.com/users";
        request.get(url).then((response) => {
            this.setState({
                users: response.body
            });
        });
    }
    render(){ 
        // this.state.users returns all users information (name, image...)
        const userName = _.map(this.state.users, (user) =>{
            return <li>{user.login}</li>
        });
        const repoURL = _.map(this.state.users, (repoUrl) =>{
            return <li>{repoUrl.repos_url}</li>
        });

        const eachAvatar = _.map(this.state.users, (avatar) =>{
            return <li>{avatar.avatar_url}</li>
        });

        return(
        <div>
        <h2>Here is the list of users in gitHub</h2>
        <table>
        <tr>
        <th>UserName</th>
        <th>Repo URL</th>
        </tr>
        <tr>
        <td>{userName}</td>
        <td>{repoURL}</td>
        <td><img  src={eachAvatar} /></td>
        </tr>
        </table>
        </div>
    );
    }
}

output:

Answer 1

I'm guessing you want a list of images so render the img tag inside your map:

const allAvatars = _.map(this.state.users, (avatar) =>{
            return <li><img src={avatar.avatar_url} /></li>
        });

Then render all avatars

<td>{allAvatars}</td>