我有一个变量定义如下：

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