reactjs - React 将图像 src 作为对象返回

Question

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

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

Answer 1

{ foo }是 { foo: foo } 的简写, 和 { bar }是 { bar: bar } 的简写.

您可以将图像 url 设置为 image，而不是使用每个图像都不同的键将图像 url 放在对象中。直接属性(property)。

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