'Pass an Image imported to react Component via props

Happy friday all,

Trying to pass an image that I have imported to a react component.

My React component:

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;

I'm rendering the component with the passed in props


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;

Just results in the alt tag rendering



Solution 1:[1]

If your image path is correct then change

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

to

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

working example Sandbox

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hakob Sargsyan