javascript - 如何将图像推入数组（React）

Question

我希望能够针对不同的情况将不同的图像推送到数组中。现在，我正在尝试在我的项目中为进球者推送一个球的图像。但返回的是：

←Object HTMLImageElement→ Vardy J. - '55

这是我的功能，我已经评论了图像的位置：

import React from 'react'
import ball from './ball.png'
import './Events.css'

function Events(props) {
   let events = [],
   homeGoalEvent = [],
   awayGoalEvent = [],
   homeEvents = [],
   awayEvents = [],
   awayEventsSort = [],
   homeEventsSort = []

   let ballImage = document.createElement('img')  //create image
   ballImage.src = ball

    props.props.location.state.id.goalscorer.map(i => {
       events.push(i);
    })

    for (let i = 0; i < events.length; i++) {

        if (events[i].home_scorer || events[i].away_scorer) {
            if (events[i].home_scorer.length > 0) {
                homeGoalEvent.push(events[i]);
            } else if (events[i].away_scorer.length > 0) {
                awayGoalEvent.push(events[i])
            } 
        } else if (events[i].home_fault || events[i].away_fault) {
            if (events[i].home_fault.length > 0) {
                homeCardEvent.push(events[i])
            } else if (events[i].away_fault.length > 0) {
                awayCardEvent.push(events[i])
            }   
        } 
    }

    homeGoalEvent.map(i => {
        homeEvents.push(`${ballImage} ${i.home_scorer} - '${i.time}`) //Enter image here
    })

    const customSort = (a, b) => Number(a.match(/(\d+)/g)[0]) - Number((b.match(/(\d+)/g)[0]))
    homeEventsSort.push(homeEvents.sort(customSort))

    return (
        <div className="events-list">
            <table className="home-table">
                <tr><th>{props.props.location.state.id.match_hometeam_name}</th></tr>
                {homeEventsSort[0].map(i => {
                            return <tr><td>{i}</td></tr>
                    })
                    }
            </table>
        </div>
    )
}

export default Events

标签： javascriptreactjs