React 将图像 src 作为对象返回

我有一个这样定义的变量：

const team = [
  {
    name: "Foo",
    bio: "FooBar",
    image: { foo }
  },
  {
    name: "Bar",
    bio: "FooBar",
    image: { bar }
  },
];

图像导入的位置如下：

import foo from "../assets/foo.jpg";
import bar from "../assets/bar.jpg";

然后将它们传递给要渲染的组件，其中：

<TeamRow team={team} />

The TeamRow component looks like this:

const TeamRow = props => {
  const items = props.team.map((item, index) => {
    return (
      <div className="col-10 col-sm-4 col-md-1 mx-auto text-center">
        <div className="row">
          <div className="col-12 teamMemberImage">
            <img className="img-fluid" src={item.image} />
          </div>
        </div>
        <div className="row">
          <div className="col-12">{item.name}</div>
        </div>
        <div className="row">
          <div className="col-12">{item.bio}</div>
        </div>
      </div>
    );
  });
  return <div className="row">{items}</div>;
};

export default TeamRow;

图像无法渲染。当我在开发工具中查看它们时，它们有src="Object object"。调用的类TeamRow, 是其中的类team被定义为。定义好后，调用console.log(foo正如预期的那样，返回指向图像的 url。不知何故，在传递给第二个组件时，预期的行为停止了。

奇怪的是，早些时候，我使用了 React 徽标作为占位符。所以：import logo from "../assets/logo.svg";，这有效，但前提是我将其呈现为src={item.image.logo}.

{ foo }是简写{ foo: foo }, and { bar }是简写{ bar: bar }.

您可以将其设置为image直接财产。

const team = [
  {
    name: "Foo",
    bio: "FooBar",
    image: foo
  },
  {
    name: "Bar",
    bio: "FooBar",
    image: bar
  },
];