'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 |