通过道具传递导入的图像以反应组件

Question

大家周五快乐，

正在尝试将我导入的图像传递给 React 组件。

我的 React 组件：

import React from "react";

function profile(props) {
  return (
    <>
        <img
          className="absolute object-cover w-full h-full rounded"
          src={props.pfp}
          alt="Person"
        />
  </>
  );
}

export default profile;

我正在使用传入的道具渲染组件


import Img1 from "../../assets/images/example1.png";


function Home() {
  const team = [
    {
      name: "Name 1",
      role: "Frontend Developer",
      pfp: {Img1},
    },
  ];

  return (
    <>
       {team.map((profile, index) => (
            <Profile
              key={index}
              name={profile.name}
              role={profile.role}
              pfp={profile.pfp}
            />
       ))}
    </>
  );
}

export default Home;

只是导致 alt 标签渲染

Answer 1

如果您的图片路径正确，则更改

<img
      className="absolute object-cover w-full h-full rounded"
      src={props.pfp}
      alt="Person"
    />

至

 <img
      className="absolute object-cover w-full h-full rounded"
      src={props.pfp.Img1}
      alt="Person"
    />

工作示例Sandbox

通过道具传递导入的图像以反应组件

Pass an Image imported to react Component via props

components

jsx

reactjs