发送 svg 作为 prop 会被渲染为 [object Object]

我正在尝试将 SVG 图像作为对象中的字段发送。使用物体作为道具。

创建对象数组：

import eagles from './logo.svg'
import packers from './packers.svg'
import panthers from './panthers.svg'
import seahawks from './seahawks.svg'

games : [{"id" : 1, "team1" : "Eagles", "team2" : "Packers ", "logo1" : {eagles}, "logo2" : {packers}},
      {"id" : 2, "team1" : "Panthers", "team2" : "Seahawks", "logo1" : {panthers}, "logo2" : {seahawks}}],

这是我渲染它的方式：

const Game = (game) =>

  <div className="col-sm-6 col-md-3 text-center">
    <table className="table">
    <tbody>
      <tr>
        <th scope="row"><img src={game.game.logo1} alt="" border="3" height="75" width="75" /></th>
        <td>{game.game.team1}</td>
      </tr>
      <tr>
        <th scope="row"><img src={game.game.logo2} alt="" border="3" height="75" width="75" /></th>
        <td>{game.game.team2}</td>
      </tr>
    </tbody>
    </table>
  </div>

然而，它被渲染为：

<img width="75" height="75" alt="" src="[object Object]" border="3">

这里有什么问题吗？

您将 svg 变量包装在一个对象中。删除 games 数组中 svgs 之前的 {}：

games: [
  {
    id: 1,
    team1: "Eagles",
    team2: "Packers",
    logo1: eagles,
    logo2: packers,
  },
  {
    id: 2,
    team1: "Panthers",
    team2: "Seahawks",
    logo1: panthers,
    logo2: seahawks
  }
];