0

Имеется изображение, и необходимо прописать путь к нему, в src. Сам путь передается в компонент через props.

Во-первых,<img src="./path/img.png"> - если передавать так путь, то изображение не появляется, поэтому использую: <img src={require("./path/img.png")}> - если знаете вариант лучше, то буду рад его узнать.

Во-вторых, при передачи в require путь из props (<img src={require(this.props.card)}>), то появляется ошибка Error: Cannot find module ".".
this.props.card - 100% является строкой.
Как быть, как правильно передать путь в src?

3
  • Вам нужно понимать что именно браузер читает пусть из src и он совершенно понятия не имеет что вы имеете в виду, когда пишете "./path/blablabla.bla". При подобной записи он (браузер) обращается сюда - your-domain.bla/./path/img.png Require тут скорее правильно чем нет, однако вопрос, чем вы собираете свой проект или вопрос иначе - вы используете какой то фреймворк ?
    – zalex
    Commented 12 авг. 2018 в 22:13
  • @zalex собираю reactjs
    – Илья
    Commented 12 авг. 2018 в 22:16
  • Тут уж лучше подождать того, кто в понимает в реакт, но могу предположить что {require(this.props.card)} заставляет искать модуль с именем вашей картинки.
    – zalex
    Commented 12 авг. 2018 в 22:19

3 ответа 3

0

Вы можете вызывать require не у потомка, а у родителя:

<MyComponent imageSrc={require("./image.jpg")} />

И использовать уже привычный метод:

<img src={this.props.imageSrc} />
1
  • Суть в том, что мне не определенный путь к файлу нужен в виде строки засунуть в require, а переменную содержащий путь. если делать так, как вы советуете, то выглядить оно будет так: <MyComponent imageSrc={require(card.img)}
    – Илья
    Commented 13 авг. 2018 в 7:22
0

Забирать путь к файлам можно прямо из "заинтересованного" компонента, а конкретный файл передавать в пропсы.

Родитель:

const Toolbar = () => {
    return (
        <div className='toolBar'>
            <div className='tools'>
                <ToolButton image='undo.png' />
                <ToolButton image='redo.png' />
                <ToolButton image='save.png' />
            </div>
        </div>
    )
}

Потомок:

const ToolButton = ({ image }) => {
    return (
        <div className='tool-button'>
            <img src={require('../assets/icons/' + image)} alt='' />
        </div>
    )
}
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 23 мар. 2023 в 11:31
0

В реакт импортировать нужно изображение

Import img "./path/img.png"

Потом этот img использовать в src

<img src={img}>

Это по вопросу как прописать путь к изображению

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.