@embiid

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

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

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

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/>.
  • Вопрос задан
  • 3231 просмотр
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
props принято называть в camelCase. Вместо ProjectView, свойство следует назвать projectView или вообще сократить до view(или img).
<NewSubProject img={require('../images/github-brands.svg')}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы