CODEWITHSUNDEEP
javascriptfacebookreactjs
Bryan
Bryan

Reputation: 97

Facebook Create React App Build - Add Image As Prop Type

I have a component comment.js

export default function Comment (props) {
return (
    <div className="comment-wrapper">
        <img src={props.userImage} />
        <p className="comment">{props.commentTitle}</p>
    </div>
);
}

So I just simply want to have that component in the parent component as 

<Comment userImage="IMAGE_LINK" commentTitle="BLAH BLAH" />

Again, I am using the Create-React-App build system from facebook. With that being said I know I can hard code an image using the following 

<img src={require(`./images/MY-IMAGE.png`)} />

The code above works perfectly fine for the test image I am trying to load. However, when needed dynamically for the component the issue gets a bit more complex.

Now with the comment.js component above, I cannot do 

<img src={require("./images" + {props.userImage})} />

I have taken a look at one thread on this site as well as reading this blog post on the issue and can still not come to a conclusion.

How can I handle image assets being passed as props to a component, in this case?

Upvotes: 1

Views: 234

Answers (1)

phtn458
phtn458

Reputation: 505

you can use import

// parent component
import MenuImage from '/img/menu.png'

<Comment image={MenuImage} commentTitle="Title"} />

then on Comment component

export default props => (
  <img src={props.image} alt='' />
)

Upvotes: 1

Related Questions