Как отобразить img в props компонента?

Question

[embiid]

Есть компонент, который используется много раз. У него есть текст и фото. С текстом я разобрался, а с картинкой - нет.

Код самого компонента:

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;

Вот так я его вызываю:

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

Но проблема заключается в том, что я хочу загружать ему картинку не с интернета, а с папки, что находится в src. Вот как я пробовал делать:

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

Такой способ работал только с тегом <img/>.

Comments

[Александр]

Получается, вы в качестве src картинки устанавливаете объект ProjectView?
Нужно же указать url - строку текста.

Попробуйте внутри render вывести в консоль свой тэг img и посмотрите, что там установилось.

Answer 1

[Антон Спирин]

props принято называть в camelCase. Вместо ProjectView, свойство следует назвать projectView или вообще сократить до view(или img).

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

Comments

[embiid]

Спасибо, учту про "верблюжий стиль". Спасибо, что подсказываете, я это ценю!