How to display img in component props?

Question

JavaScript

There is a component which is used many times. It has text and photos. I understood the text, but not the picture.
The code of the component itself:

function NewSubProject(props) {
    return (
        <div className="gallery-image">
            <div className="img-box">
                <img src = { props.ProjectView } />
                <div className="transparent-box">
                    <div className="caption">
                        <p> { props.ProjectName } </p>
                        <p className="opacity-low"> { props.ProjectDesc } </p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default NewSubProject;

This is how I call it:

<NewSubProject  ProjectView = {'http://via.placeholder.com/350x250.png'}
                                ProjectName = "asd"
                                ProjectDesc = "123" />

But, the problem is that I want to upload a picture to him not from the Internet, but from a folder that is in src. Here is how I tried to do it:

<NewSubProject  ProjectView = {'require("../images/github-brands.svg")'}
 ...

This method only worked with the tag

Answer 1

props is usually called in camelCase. Instead of ProjectView, the property should be called projectView or generally shortened to view (or img).

<NewSubProject img={require('../images/github-brands.svg')}