将 svg 作为道具发送会呈现为

Question

我正在尝试将 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">

这里有什么问题？

Answer 1

您将 svg 变量包装在一个对象中。移除 games 数组中 svgs 之前的 {}：games: [&nbsp; {&nbsp; &nbsp; id: 1,&nbsp; &nbsp; team1: "Eagles",&nbsp; &nbsp; team2: "Packers",&nbsp; &nbsp; logo1: eagles,&nbsp; &nbsp; logo2: packers,&nbsp; },&nbsp; {&nbsp; &nbsp; id: 2,&nbsp; &nbsp; team1: "Panthers",&nbsp; &nbsp; team2: "Seahawks",&nbsp; &nbsp; logo1: panthers,&nbsp; &nbsp; logo2: seahawks&nbsp; }];

Answer 2

{eagles} 将转换为 Object {eagles: eagles}。只需删除{和}。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},&nbsp; &nbsp; &nbsp; {"id" : 2, "team1" : "Panthers", "team2" : "Seahawks", "logo1" : panthers, "logo2" : seahawks}]