将 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: [

  {

    id: 1,

    team1: "Eagles",

    team2: "Packers",

    logo1: eagles,

    logo2: packers,

  },

  {

    id: 2,

    team1: "Panthers",

    team2: "Seahawks",

    logo1: panthers,

    logo2: seahawks

  }

];

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},

      {"id" : 2, "team1" : "Panthers", "team2" : "Seahawks", "logo1" : panthers, "logo2" : seahawks}]